Question

我有一个绑定{{getCategoryName(post.categories[0])['name']}}，我需要在我的组件中使用方法post.categories[0]处理*ngFor循环中返回的值getCategoryByName()，然后再将其绑定到template.the方法返回Object。

我一直收到错误Cannot read property 'name' of undefined。我尝试使用['name']密钥而不是.name来获取该属性，但仍然会收到错误。

有关解决方法的任何想法吗？

  <ion-item text-wrap class="news-item" *ngFor="let post of posts" (click)="viewStory(post)">
          <div >
          <p>{{getCategoryName(post.categories[0])['name']}}</p>
          <h2>{{post.title.rendered}}</h2>
          <p>By Fitz &middot; {{post.date | fromNow}}</p>
        </div>
    </ion-item>

方法

  getCategoryName(categoryId) {
    return this.categories[this.categories.findIndex((el)=>{ return el.id == categoryId})];
  }

通过上述方法从Array返回的Object的示例ember

[
  {
    "id": 33,
    "count": 1,
    "description": "",
    "link": "http://XXXXXXXXXXXXX.co/category/apps/",
    "name": "Apps",
    "slug": "apps",
    "taxonomy": "category",
    "parent": 0,
    "meta": [],
    "_links": {
      "self": [
        {
          "href": "http://XXXXXXXXXXXXX.co/wp-json/wp/v2/categories/33"
        }
      ],
      "collection": [
        {
          "href": "http://XXXXXXXXXXXXX.co/wp-json/wp/v2/categories"
        }
      ],
      "about": [
        {
          "href": "http://XXXXXXXXXXXXX.co/wp-json/wp/v2/taxonomies/category"
        }
      ],
      "wp:post_type": [
        {
          "href": "http://XXXXXXXXXXXXX.co/wp-json/wp/v2/posts?categories=33"
        },
        {
          "href": "http://XXXXXXXXXXXXX.co/wp-json/wp/v2/jobs?categories=33"
        }
      ],
      "curies": [
        {
          "name": "wp",
          "href": "https://api.w.org/{rel}",
          "templated": true
        }
      ]
    }
  },

]

Answer 1

在你的getCategoryName方法中检查post.categories是否未定义，然后返回对象{name：＆＃39;＆＃39;}：

if (post.categories === undefiend) { 
return {name : ''}
}

或者你可以在模板中使用：

{{(getCategoryName(post.categories[0]) || {name : ''})['name']}}

Answer 2

你可以这样做

＆＃13;

{{getCategoryName(post.categories[0])?.name}}

＆＃13;

?是安全的导航操作员。它检查变量是否为null或未定义，以便我们的模板不会尝试选择某些属性的属性。

更多信息：https://angular.io/guide/template-syntax#the-safe-navigation-operator----and-null-property-paths

Angular表达式绑定中的未定义属性

2 个答案: