javascript - Undefined properties in Angular expression binding - Stack Overflow

admin管理员组

文章数量:1389772

I have a binding {{getCategoryName(post.categories[0])['name']}} where I need to process the value post.categories[0] returned in the *ngFor loop with a method getCategoryByName() in my ponent before finally binding it to the template.The method returns an Object.

I keep getting the error Cannot read property 'name' of undefined . I have tried getting the property using the ['name'] key instead of .name but still get the error.

Any thoughts for a workaround?

  <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>

The method

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

Example ember of the Array from which the Object is returned by method above

[
  {
    "id": 33,
    "count": 1,
    "description": "",
    "link": "/",
    "name": "Apps",
    "slug": "apps",
    "taxonomy": "category",
    "parent": 0,
    "meta": [],
    "_links": {
      "self": [
        {
          "href": ""
        }
      ],
      "collection": [
        {
          "href": ""
        }
      ],
      "about": [
        {
          "href": ""
        }
      ],
      "wp:post_type": [
        {
          "href": ""
        },
        {
          "href": ""
        }
      ],
      "curies": [
        {
          "name": "wp",
          "href": "/{rel}",
          "templated": true
        }
      ]
    }
  },

]

I have a binding {{getCategoryName(post.categories[0])['name']}} where I need to process the value post.categories[0] returned in the *ngFor loop with a method getCategoryByName() in my ponent before finally binding it to the template.The method returns an Object.

I keep getting the error Cannot read property 'name' of undefined . I have tried getting the property using the ['name'] key instead of .name but still get the error.

Any thoughts for a workaround?

  <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>

The method

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

Example ember of the Array from which the Object is returned by method above

[
  {
    "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/{rel}",
          "templated": true
        }
      ]
    }
  },

]

• javascript
• angular

Share Improve this question Follow edited Nov 15, 2017 at 22:03 fitzmode asked Nov 15, 2017 at 21:38 fitzmodefitzmode 1,07622 gold badges2222 silver badges3232 bronze badges 2

• show the body of getCategoryName and the structure of posts array – El houcine bougarfaoui Commented Nov 15, 2017 at 21:44
• @BougarfaouiElhoucine I've edited to show the structure the object (Just one entry for brevity) and the method. – fitzmode Commented Nov 15, 2017 at 22:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You could simply do like this

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

? is the safe navigation operator. It checks whether the variable is null or undefined so that our template won't try to select a property of something falsy.

More info: https://angular.io/guide/template-syntax#the-safe-navigation-operator----and-null-property-paths

In your getCategoryName method check if post.categories is undefined, and then return object {name : ''}:

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

or you could use in template:

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

本文标签： javascriptUndefined properties in Angular expression bindingStack Overflow