*ngFor Array display error

Ionic Framework ionic-v3
1

Hello I tried to display 2 Arrays but it displays it wrong. The items1 is displayed in whole instead of for each. If i add it to a normal div outside of ion-card it displays it fine.

HTML:

  <ion-card *ngFor="let item of items"  >
    <ion-card-header >
      <ion-card-title >{{item}}</ion-card-title>
      
    </ion-card-header > 


    <ion-card-content *ngFor="let item1 of items1">{{item1}}</ion-card-content>

  </ion-card>

TS:

export class Tab1Page {

items: string = [’ Baustelle xx’, ‘Baustelle XxY’, ‘xx’, ‘xx’, ‘xx’];
items1: string = [‘15.1.2024’, ‘20.1.2024’, ‘5.2.2024’, ‘6.2.2024’, ‘8.2.2024’];

}

Result:

grafik
grafik385×811 14.9 KB

I can’t pin out the issue can someone please help me? Thanks! :bird:

2

it’s because each time you print a value from item, it goes down untill it finds items1 and then there is a ngFor cycle, it will cycle for all its items and then it goes up to the second item’s element and so on.

The problem is the way those arrays are written

try this:

  items = [
    { 'Title': 'Baustelle xx', 'Date': '15.1.2024' },
    { 'Title': 'Baustelle XxY', 'Date': '20.1.2024' },
    { 'Title': 'xx', 'Date': '5.2.2024' },
    { 'Title': 'xx', 'Date': '6.2.2024' },
    { 'Title': 'xx', 'Date': '8.2.2024' }];

<ion-card *ngFor="let item of items">
  <ion-card-header>
    <ion-card-title>{{item.Title}}</ion-card-title>

  </ion-card-header>


  <ion-card-content>{{item.Date}}</ion-card-content>

</ion-card>

you should see like this:

image
image1186×2274 102 KB

1 Like
3

Thank you that solved it for me! :bird:

1 Like