javascript - Angular 表达式绑定(bind)中的未定义属性

Question

我有一个绑定(bind) {{getCategoryName(post.categories[0])['name']}}，我需要在其中处理值 post.categories[0] 在 *ngFor 循环中返回，在我的组件中使用方法 getCategoryByName() 最后将它绑定(bind)到模板。该方法返回一个 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 的示例 ember，Object 通过上述方法从中返回

[
  {
    "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[0])?.name}}

? 是安全导航运算符。它会检查变量是 null 还是 undefined，这样我们的模板就不会尝试选择虚假的属性。

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