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

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...