Ionic html array without *ngFor

Question

How would I get data from an Array in Ionic 3 without having to use ngFor?

For example, this works

  <ion-item-sliding *ngFor="let user of users">
    <ion-item>
      <ion-grid>
        <ion-row>
          <ion-col>
            <strong>Name:</strong>
          </ion-col>
          <ion-col>
            {{user.name}}
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-item> 
    <ion-item-options side="left">
      <button ion-button (click)="delete()">
        <ion-icon name="ios-trash"></ion-icon> Delete
      </button>
    </ion-item-options>
  </ion-item-sliding>

But my users array only has 1 row, so how can I access the data without having to loop through the array using *ngFor?

Something like this?

{{users[0].id}}

Thanks

Yes, you can use {{users[0].id}}

Oleksandr Poshtaruk
– Oleksandr Poshtaruk

2018-03-08 15:56:33 +00:00
Commented Mar 8, 2018 at 15:56 — Oleksandr Poshtaruk
– Oleksandr Poshtaruk, Commented Mar 8, 2018 at 15:56

Naoe · Accepted Answer · 2018-03-08 16:11:40Z

1

As Alex said, you can use the example provided.

If you are unsure if the array has any objects, you can do something like {{ users.length > 0 ? users[0].id : '' }} or if you have many fields to display:

<div *ngIf="users.length > 0">
  <span>{{ users[0].id }}</span>
<div>

If you need to also check for undefined or null, just add that to the check. F.ex.:

<div *ngIf="users !== undefined && users !== null && users.length > 0">
  <span>{{ users[0].id }}</span>
<div>

edited Mar 8, 2018 at 16:11

answered Mar 8, 2018 at 16:02

Naoe

1,2198 silver badges12 bronze badges

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

2 Comments

S_R Over a year ago

this doesn't seem to work for me? it returns undefined is not an object (evaluating '_co.users[0].id'), but works in the ngFor loop? Sorry if i'm missing something obvious, i'm fairly new to angular and ionic!

Naoe Over a year ago

Well either _co, users, or users[0] is undefined. If you find out which you can check it. Typically it is undefined before you get the data, thats why it fails.

Collectives™ on Stack Overflow

Ionic html array without *ngFor

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related