Angular object undefined

Question

In my angular project, I have the following:

TS

this.storage.get(item_section).then((value) => {
    this.item= value;
    console.log(this.item); //The console log gives `["name","item","size"]`
    console.log(this.item[1]); //Gives `item` as the console log
});

HTML

<div class="something">{{item}}</div> //Displays "name,item,size"
<div class="something">{{item[1]}}</div> //Gets Undefined error

If I can define the this.item and get results for {{item}}, how come I get undefined error for {{item[1]}}?

I am little confused to how to fix this

item is only assignable when the async operation finishes. You can use something like this in component: this.item = this.storage.get(item_section); and in template: <ng-container *ngIf="item | async as resolvedItem"><div class="something">{{resolvedItem[1]}}</div></ng-container> — developer033
– developer033, Commented Jun 20, 2017 at 5:17
If you want to know why it happens, you can see this question. — developer033
– developer033, Commented Jun 20, 2017 at 5:25
@developer033 Thank you! I was looking through some forums to see why it was the case. Much appreciated guys!=) — Steve Kim
– Steve Kim, Commented Jun 20, 2017 at 5:27

Jayakrishnan · Accepted Answer · 2017-06-20 05:59:58Z

4

Your operation is async, so you need to wait for the item to be loaded to access the second element of the item. You can use *ngIf to achieve it.

<div class="something" *ngIf="item">{{item[1]}}</div>

edited Jun 20, 2017 at 5:59

answered Jun 20, 2017 at 5:19

Jayakrishnan

4,3043 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

developer033 Over a year ago

"...to be loaded to access the first element..." In fact, he doesn't want to access the first element, but the second :)

Sriram Jayaraman · Accepted Answer · 2017-06-20 05:37:57Z

3

Simply add a '?' next to your array item, it should work fine. Refer Safe Navigation Operator for displaying data if exists.

edited Jun 20, 2017 at 5:37

answered Jun 20, 2017 at 5:21

Sriram Jayaraman

8602 gold badges9 silver badges15 bronze badges

8 Comments

developer033 Over a year ago

It's called Safe Navigation Operator.

developer033 Over a year ago

Hmm, I just remembered that the Safe Navigation Operator doesn't support this kind of situation (I mean bracket notation)... if you try: item?[1] you'll get a "Template parse errors...".

Sriram Jayaraman Over a year ago

Yes, I just checked it out myself. It throws a template parse error.

Sriram Jayaraman Over a year ago

@developer033 I think a ternary operator would work just fine in this case :) item[1]?item[1]:''

developer033 Over a year ago

No, it won't work also, it still produces error, you can do: {{ item ? item[1] : '' }}.

|

Sajeetharan · Accepted Answer · 2017-06-20 05:17:46Z

1

It should work for the static data, it works fine here.

Check the DEMO

Alternatively since your code is asynchronous, you can try this,

<div class="something">{{item && item[0]}}

answered Jun 20, 2017 at 5:17

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Comments

rajeev · Accepted Answer · 2017-06-20 05:30:27Z

1

please try below:

<div class="something" *ngFor="let itm of item | async">{{itm}}</div>

answered Jun 20, 2017 at 5:30

rajeev

645 bronze badges

Collectives™ on Stack Overflow

Angular object undefined

4 Answers 4

1 Comment

8 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related