前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Angular list列表绑定的一个例子

Angular list列表绑定的一个例子

作者头像
Jerry Wang
发布2020-08-19 11:34:49
5730
发布2020-08-19 11:34:49
举报

新建一个hero数组作为测试数据:

代码语言:javascript
复制
import { Hero } from './heroes/hero';

export const HEROES: Hero[] = [
  { id: 11, name: 'Dr Nice' },
  { id: 12, name: 'Narco' },
  { id: 13, name: 'Bombasto' },
  { id: 14, name: 'Celeritas' },
  { id: 15, name: 'Magneta' },
  { id: 16, name: 'RubberMan' },
  { id: 17, name: 'Dynama' },
  { id: 18, name: 'Dr IQ' },
  { id: 19, name: 'Magma' },
  { id: 20, name: 'Tornado' }
];

将hero数组的值存储到Component的heroes属性里,便于UI字段的绑定:

使用directive *ngFor显示heroes属性里的所有元素:

最后的效果:

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-08-17 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档