角度4未定義の 'category'プロパティを読み取ることができません

Question

もう一度私は角度4での理解が不足していると思います！

私はルートからアクセスされたページがあり、私はurl-slug OnInitによって投稿を取得しようとしています。投稿は、前のページ（投稿ページのリスト）からキャッシュする約束の配列に存在します。リストページは正常に動作します。すべてのコンテンツがキャッシュされ、キャッシュから読み込まれます。私はこれを切ってみました、同じ問題が発生します。

ここに投稿を取得するサービスがあります。

articles: Promise<Article[]>; 

/** 
    * fetch a list of articles 
    */ 
    getArticles(): Promise<Article[]> { 
    // cached articles 
    if (this.articles) { 
     return this.articles; 
    } 

    // no articles fetched yet, go get! 
    return this.articles 
      = this.http.get(this.url, this.options) 
         .toPromise() 
         .then(response => response.json() as Article[]) 
         .catch(this.handleError); 
    } 


    /** 
    * fetch a single article by url slug 
    * @param slug 
    */ 
    getArticle(slug: string): Promise<Article> { 
    return this.getArticles() 
       .then(articles => articles.find(article => article.slug == slug)); 
    } 

と、これはSinglePostコンポーネントでそれを取得するものである：

article: Article 

ngOnInit(): void { 
    this.getArticle(); 
    } 

    getArticle(): void { 
    this.route.paramMap 
     .switchMap((params: ParamMap) => this.articleService.getArticle(params.get('name'))) 
     .subscribe(article => this.article = article); 
    } 

HTML：

<a href="" class="post-cat text-uppercase">{{ article.category }}</a> 

ポスト（私はそれを呼んでいるような物品は）間違いなく存在しており、間違いなくキャッシュの細かい部分から読み取られています。

さらに、私はエラーが発生しますが、ページは実際に正しい記事を表示します（このため、記事が正しくフェッチされている必要があります）ので、記事オブジェクトにアクセスする前に、私は角度がそれを処理するだろうと思った？

私の誤差がある：それはarticleが定義されている場合にのみcategoryプロパティにアクセスします

<a href="" class="post-cat text-uppercase">{{ article?.category }}</a> 

：

ERROR TypeError: Cannot read property 'category' of undefined at Object.eval [as updateRenderer] (PostComponent.html:4) at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js?de3d:13105) at checkAndUpdateView (core.es5.js?de3d:12256) at callViewAction (core.es5.js?de3d:12599) at execComponentViewsAction (core.es5.js?de3d:12531) at checkAndUpdateView (core.es5.js?de3d:12257) at callViewAction (core.es5.js?de3d:12599) at execComponentViewsAction (core.es5.js?de3d:12531) at checkAndUpdateView (core.es5.js?de3d:12257) at callViewAction (core.es5.js?de3d:12599)

Answer 1

はエルビス演算子?.を使用してみてください。このような

Answer 2

試してみてください。

使用then()方法の代わりに、subscribe()

service.ts

articles: Promise<Article[]>; 

/** 
    * fetch a list of articles 
    */ 
getArticles(): Promise<Article[]> { 
    // cached articles 
    if (this.articles) { 
     return this.articles; 
    } 

    // no articles fetched yet, go get! 
    return this.articles = this.http.get(this.url, this.options) 
     .toPromise() 
     .then((response) => response.json()) 
     .catch(this.handleError); 
} 


/** 
* fetch a single article by url slug 
* @param slug 
*/ 
getArticle(slug: string): Promise<Article> { 
    return this.getArticles() 
     .then(articles => articles.find(article => article.slug == slug)); 
} 

component.ts

getArticle(): void { 
    this.route.paramMap.switchMap((params: ParamMap) => { 
     this.articleService.getArticle(params.get('name')) 
      .then(result => { 
       console.log('result', result); 
       this.article = result 
      }); 
    }) 
}