查看: 166|回复: 0

angular 中数据循环 *ngFor

[复制链接]

3

主题

0

回帖

0

积分

热心网友

金币
0
阅读权限
220
精华
0
威望
0
贡献
0
在线时间
0 小时
注册时间
2011-6-18
发表于 2019-5-17 18:01:00 | 显示全部楼层 |阅读模式
<!--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'
    }
  ];
}

效果:

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

圆梦公社,专注于为全球华人提供纯粹技术交流的地方,请勿发布任何政治及违法的言论。如有相关侵权、举报、投诉及建议等,请发 E-mail:dzh188@hotmail.com

Powered by Discuz! X5.0 © 2001-2026 Discuz! Team.

在本版发帖返回顶部