循环数据

在angular中，循环显示数据需要用到ngFor

首先在组件的类中定义一个名为messages的变量，类型是string[]：

app.component.ts:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
    import { Component, OnInit } from '@angular/core';
    @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
    })
    export class AppComponent {
    title = 'SampleApp';
  messages: string[] = ["message1","message2","message3"];
    }

然后在对应的html文件app.component.html写入：

app.component.html:

1
2
3
<div *ngFor="let message of messages">
    <span>{{ message }}</span>
</div>

意思是循环messages中的数据，每有一个就创建一个span标签显示message

  • 要注意ngFor前面的"*"是必须的

效果如下：

loop