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'
    }
  ];
}

效果:

最后，关注【码上加油站】微信公众号后，有疑惑有问题想加油的小伙伴可以码上加入社群，让我们一起码上加油吧！！！

来源：https://www.cnblogs.com/loaderman/p/10882866.html