[Angular 2] ngFor

It’s conceptually the same as Angular 1’s ng-repeat, but you’ll find the syntax quite different as it aligns with #refs in Angular 2 and JavaScript “for of” loop.

import {Component, View, NgFor} from ‘angular2/angular2‘;
import {TodoService} from ‘./todoService‘;

@Component({
    selector: ‘todo-list‘
})
@View({
    directives: [NgFor],
    template: `
          <div>
              <div *ng-for="#todo of todoService.todos">
                  {{todo}}
              </div>
          </div>
    `
})

export class TodoList{
    constructor(
        public todoService:TodoService
    ){

    }
}
时间: 2024-08-09 19:34:49

[Angular 2] ngFor的相关文章

[Angular 2] *ngFor with index

Let's see how to track index when we use 'ngFor: <li *ngFor="#hero of heros | async, #i = index"> <hero-item [hero]="hero" (changed)="thisHero = $event;" [index]="i"></hero-item> </li> #i = i

[Angular 2] 4. RC7: More on *ngFor, @ContentChildren &amp; QueryList&lt;&gt;

In previous artical, we introduce the how to use *ngFor. The limitation for previous solution to display all the heros is we hard cord all heros in our heroes component. First, in real world app, we cannot hard cord;  Seond, even we don't hard code,

[Angular 2] Using ng-for to repeat template elements

This lesson covers Angular 2’s version of looping through data in your templates: ng-for. It’s conceptually the same as Angular 1’s ng-repeat, but you’ll find the syntax quite different as it aligns with #refs in Angular 2 and JavaScript “for of” loo

[Angular 2] 3. RC7: *ngFor

heros.ts: import {Component} from "@angular/core"; const HEROES = [ {id: 1, name:'Superman'}, {id: 2, name:'Batman'}, {id: 5, name:'BatGirl'}, {id: 3, name:'Robin'}, {id: 4, name:'Flash'} ]; @Component({ selector:'heroes', styleUrls: [ 'heroes.c

Angular基础(二) 组件的使用

? 一.简单操作 a) 使用Angular CLI可以快速创建项目框架,先运行 $ npm install –g @angular/[email protected]安装CLI,为CLI的位置设置环境变量,然后就可以全局使用ng命令了. 执行ng new –ng4 angular-hello-world可以创建Angular4项目,会自动生成基础的文件夹和文件,还会自动进行npm i操作,下载并安装所需的依赖. 然后执行ng serve就可以编译并启动这个程序了,但ng并不会自动打开浏览器. b

Angular 4+ HttpClient

这篇,算是上一篇Angular 4+ Http的后续: Angular 4.3.0-rc.0 版本已经发布??.在这个版本中,我们等到了一个令人兴奋的新功能 - HTTPClient API 的改进版本: HttpClient 是已有 Angular HTTP API 的演进,它在一个单独的 @angular/common/http 包中.这是为了确保现有的代码库可以缓慢迁移到新的 API: 大多数前端应用都需要通过 HTTP 协议与后端服务器通讯.现代浏览器支持使用两种不同的 API 发起 H

Angular 4 设置组件样式的几种方式

你用Angular吗? 一.介绍 如何只改动最简单的css代码,呈现完全不一样的视图效果. 第一种:最基本的设置: 图1 代码 图2 界面运行效果图 平常,想给一个label或者p等标签添加样式,我们就是这样操作,在Angular中也是一样的. 现在,如果我想要将字体换成红色呢,首先想到的就是去修改.label里的color属性值,可如果样式表是封装的或者外部引用的,不方便修改呢? 这时候就要用到ElementRef 和Renderer2了.可以去Angular 官网里搜索哟. renderer

[Angular] USING ZONES IN ANGULAR FOR BETTER PERFORMANCE

Link to the artical. Zone detects any async opreations. Once an async oprations happens in Angular, Zone will notify change detection to kick in. Images we have 5000 svg box displaying on the screen. And each svg elements and three event listener on

Angular 2 模板语法与常用指令简介

一.模板语法简介 插值表达式 <div>Hello {{name}}</div> 等价于 <div [textContent]="interpolate(['Hello'], [name])"></div> 模板表达式 1.属性绑定 1.1输入属性的值为常量 <show-title title="Some Title"></show-title> 等价于 <show-title [titl