我有一个绑定{{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 · {{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