Angular list列表绑定的一个例子

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

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属性里的所有元素：

最后的效果：

要获取更多Jerry的原创文章，请关注公众号"汪子熙":

Angular list列表绑定的一个例子相关推荐

Angular元素属性绑定的一个例子
如下图的例子:a标签的disabled class绑定到model.active属性的取反值,即如果model.active为false,该标签就为disabled状态. 这个a标签页默认是disab ...
Angular应用的router-outlet使用一个例子
项目地址:https://angular-jerry-empty-store.stackblitz.io TopBar Component里,使用Angular routerLink指令设置了一个路由 ...
Angular 自定义 structural 指令的一个例子
The <ng-container> is a syntax element recognized by the Angular parser. It's not a directive, ...
Angular rxjs fromEvent使用的一个例子
源代码: import { Component, OnInit } from '@angular/core'; import { JerrySandBoxService } from './jerry ...
Angular component的一个例子
官网:https://angular.io/guide/architecture-components Before a view is displayed, Angular evaluates th ...
SAP Spartacus 中，Angular ＜ng-container＞使用的一个例子
Angular官网里对ng-container的介绍: The Angular is a grouping element that doesn't interfere with styles or ...
Webpack入门——使用Webpack打包Angular项目的一个例子
(一)什么是Webpack Webpack是一个前端的模块管理工具(module bundler),以下是webpack的官网:http://webpack.github.io/,一进入官网可以看到下 ...
Angular数据双向绑定
本文转载自: http://www.cnblogs.com/jingwhale/p/5117419.html 作者:jingwhale 转载请注明该声明. Angular数据双向绑定 AngularJ ...
angular的双向绑定原理
http://sentsin.com/web/779.html AngularJS是一款优秀的前端JS框架,已经被用于Google的多款产品当中.AngularJS有着诸多特性,最为核心的是:MVVM ...

Angular list列表绑定的一个例子

Angular list列表绑定的一个例子相关推荐

最新文章

热门文章