首页 文章

Angular 4无法读取未定义的属性'category'

提问于
浏览 次
0

再一次，我认为我在Angular 4中缺乏理解！

我有一个页面，通过路由访问，我试图通过url-slug OnInit获取帖子 . 帖子驻留在Promises数组中，我从上一页缓存（这是一个帖子列表页面） . 列表页面工作正常 . 我的所有内容都缓存并从缓存中读取 . 我试过关闭它，发生同样的问题 .

这是获取帖子的服务 .

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>

帖子（我称之为文章）肯定存在，并且肯定是从缓存中读取的 .

此外，虽然我收到一个错误，页面仍然实际显示正确的文章（我可以确认文章必须正确提取因为这），所以我觉得它试图访问文章对象之前填充，我认为角度会处理那个？

我的错误是：

ERROR TypeError：无法在checkAndUpdateView（核心）的Object.debugUpdateRenderer [as updateRenderer]（core.es5.js？de3d：13105）的Object.eval [as updateRenderer]（PostComponent.html：4）中读取未定义的属性'category' .es5.js？de3d：12256）在callViewAction（core.es5.js？de3d：12599）的execComponentViewsAction（core.es5.js？de3d：12531），在checkAndUpdateView（core.es5.js？de3d：12257）的callViewAction （core.es5.js？de3d：12599）在checkAndUpdateView（core.es5.js？de3d：12257）的execComponentViewsAction（core.es5.js？de3d：12531）处于callViewAction（core.es5.js？de3d：12599）

javascript angular angular-promise

2 回答

  • 3

    尝试使用elvis operator ?. ：

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

    仅当定义了 article 时，它才会访问 category 属性 .

    回复于
  • 0

    试试这样：

    使用 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
            });
    })
}
    回复于

相关问题