javascript-角度表达式绑定中的未定义属性

我有一个绑定{{getCategoryName(post.categories [0])[‘name’]}},我需要在组件中使用方法getCategoryByName()处理* ngFor循环中返回的值post.categories [0].最终将其绑定到模板之前.该方法返回一个Object.

我不断收到错误消息：无法读取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})];
  } 

数组的余烬,上述方法从中返回对象

[
  {
    "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
        }
      ]
    }
  },

]

解决方法:

你可以这样简单地做

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

？是安全的导航运算符.它检查变量是null还是未定义,以便我们的模板不会尝试选择一些虚假的属性.

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