# \*ngFor Array display error

**URL:** <https://forum.ionicframework.com/t/ngfor-array-display-error/239905>\
**Category:** ionic-v3\
**Created:** [February 24, 2024, 9:07am UTC](https://forum.ionicframework.com/t/ngfor-array-display-error/239905 "2024-02-24T09:07:19Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![cherry](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/cherry/32/149370_2.png) [@cherry](https://forum.ionicframework.com/u/cherry)\
**Post date:** [February 24, 2024, 9:07am UTC](https://forum.ionicframework.com/t/ngfor-array-display-error/239905/1 "2024-02-24T09:07:19Z")

</div>

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](https://global.discourse-cdn.com/ionicframework/original/3X/f/b/fb804fa795cb6032d4ebb258fa07e1fb65ae7324.png)

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

---

<div class="post-metadata">

**Author:** ![ciccilleju](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/ciccilleju/32/135142_2.png) [@ciccilleju](https://forum.ionicframework.com/u/ciccilleju)\
**Post date:** [February 24, 2024, 2:24pm UTC](https://forum.ionicframework.com/t/ngfor-array-display-error/239905/2 "2024-02-24T14:24:17Z")

</div>

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:

```auto
  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](https://global.discourse-cdn.com/ionicframework/original/3X/3/d/3dee2acb7ec2061b662d752241ca0cf227b702da.png)

---

<div class="post-metadata">

**Author:** ![cherry](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/cherry/32/149370_2.png) [@cherry](https://forum.ionicframework.com/u/cherry)\
**Post date:** [February 24, 2024, 3:51pm UTC](https://forum.ionicframework.com/t/ngfor-array-display-error/239905/3 "2024-02-24T15:51:31Z")

</div>

> [@ciccilleju](#):
>
> ```auto
> <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>
> 
> ```

Thank you that solved it for me! 🐦