angular 中数据循环 *ngFor
<!--The content below is only a placeholder and can be replaced.--> <div style="text-align:center"> <h1> Welcome to {{ title }} </h1> <h1>循环数据 显示数据的索引(key)</h1> <ul> <li *ngFor="let item of list;let key=index;"> {{key}}---{{item.title}} </li> </ul> </div> <router-outlet></router-outlet>
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { title = 'Angulardemo'; public list:any[]=[ { "title":'我是数据1' }, { "title":'我是数据2' }, { "title":'我是数据3' } ]; }
效果:
最后,关注【码上加油站】微信公众号后,有疑惑有问题想加油的小伙伴可以码上加入社群,让我们一起码上加油吧!!!
posted on 2019-05-17 18:01 LoaderMan 阅读(3547) 评论(0) 编辑 收藏 举报