Показать массив в DOM

Question

Прошу прощения за мои небольшие знания в Angular. Я учу это:)

Хотелось бы отобразить в шаблоне поле массива. И это не работает так, как я это делаю. (

Home.page.TS

appInfo: any[] = [
    {
      title: 'Chapitre 1',
      description: 'Contenu'
    }
  ];

home.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>
      Application de Test
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content >
  <h1>{{appInfo.title}}</h1>
  <ion-text>{{appInfo.description}}</ion-text>

</ion-content>

Не отображается поле.

Answer 1

Использовать * ngДля структурной директивы

<ion-header>
 <ion-toolbar>
   <ion-title>
    Application de Test
  </ion-title>
 </ion-toolbar>
</ion-header>

<ion-content *ngFor="let infor of appInfo">
 <h1>{{infor.title}}</h1>
 <ion-text>{{infor.description}}</ion-text>
</ion-content>

Дается еще один длинный способ получения данных массива.

    heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
    myHero1 = this.heroes[0];
    myHero2 = this.heroes[1];
    myHero3 = this.heroes[2];
    myHero4 = this.heroes[3];

.html файл

    <p [innerText]="myHero1"></p>
    <p [innerText]="myHero2"></p>
    <p>{{myHero3}}</p>
    <p>{{myHero4}}</p>

Answer 2

Используйте ngFor для перебора массивов:

<ion-content *ngFor="let info of appInfo">
  <h1>{{info.title}}</h1>
  <ion-text>{{info.description}}</ion-text>
</ion-content>

Если вы хотите отобразить только первый элемент:

<ion-content *ngIf="appInfo && appInfo.length > 0">
  <h1>{{appInfo[0].title}}</h1>
  <ion-text>{{appInfo[0].description}}</ion-text>
</ion-content>