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

使用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>

Answer 2

使用* ngFor结构化指令

<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>

在DOM中显示数组

2 个答案: