CODEWITHSUNDEEP
angularionic3ngfor
S_R
S_R

Reputation: 1998

Ionic html array without *ngFor

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

Upvotes: 1

Views: 2000

Answers (1)

Naoe
Naoe

Reputation: 1219

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>

Upvotes: 1

Related Questions