Angular 2 中是否存在 ngRepeat?
Does ngRepeat exist in Angular 2?
我已经阅读了与 Angular 2 及其 ng-repeat 实现相关的各种问题跟踪器条目,但就目前而言,我还没有真正弄清楚它是否真的存在。
是否可以在 angular 2 中使用 ng-repeat
?
更新:此评论现已过时,请查看已接受的答案
好的,目前,以下工作。
/// <reference path="typings/angular2/angular2.d.ts" />
import {Component, View, For, bootstrap} from 'angular2/angular2';
// Annotation section
@Component({
selector: 'itemlist'
})
@View({
directives: [For]
template: `<h2 (click)="onClick()">Hello {{ name }}</h2><ul><li *for="#item of items">{{item.name}}</li></ul>`
})
// Component controller
class ItemList {
name: string;
items: array;
constructor() {
this.name = 'Sub';
this.items = [];
this.addItem("Dog 0");
this.addItem("Dog 1");
this.addItem("Dog 2");
}
addItem(name){
this.items.push({id: this.items.length, name: name});
}
onClick() {
console.log(this.items);
this.addItem("Dog "+this.items.length);
}
}
我错过了什么
您需要导入 For
(第 3 行)
您需要为相关组件声明 For
的依赖项(第 9 行)
"ng-repeat" 的正确语法是 CURRENTLY *for="#item of items"
它似乎在开发过程中已经发生了很大的变化,所以如果它再次发生变化我也不会感到惊讶。
从 alpha 28 到 30,语法如下:
import { NgFor } from 'angular2/angular2';
@View({ directives: [NgFor] })
<div *ng-for="#item of items">
Angular 2.0 版本
我的-component.ts:
import { Component } from 'angular2/core';
@Component({
selector: 'my-component',
templateUrl: './my-component.html'
})
export class MyComponent{
public values: number[] = [1, 2, 3];
}
我的-component.html:
<div *ngFor='let value of values; trackBy: index;'>
{{ value }}
</div>
对于 angular 8 及更高版本,正确的语法是
<ul>
<li *ngFor="let hero of heroes">
{{ hero }}
</li>
</ul>
我已经阅读了与 Angular 2 及其 ng-repeat 实现相关的各种问题跟踪器条目,但就目前而言,我还没有真正弄清楚它是否真的存在。
是否可以在 angular 2 中使用 ng-repeat
?
更新:此评论现已过时,请查看已接受的答案
好的,目前,以下工作。
/// <reference path="typings/angular2/angular2.d.ts" />
import {Component, View, For, bootstrap} from 'angular2/angular2';
// Annotation section
@Component({
selector: 'itemlist'
})
@View({
directives: [For]
template: `<h2 (click)="onClick()">Hello {{ name }}</h2><ul><li *for="#item of items">{{item.name}}</li></ul>`
})
// Component controller
class ItemList {
name: string;
items: array;
constructor() {
this.name = 'Sub';
this.items = [];
this.addItem("Dog 0");
this.addItem("Dog 1");
this.addItem("Dog 2");
}
addItem(name){
this.items.push({id: this.items.length, name: name});
}
onClick() {
console.log(this.items);
this.addItem("Dog "+this.items.length);
}
}
我错过了什么
您需要导入 For
(第 3 行)
您需要为相关组件声明 For
的依赖项(第 9 行)
"ng-repeat" 的正确语法是 CURRENTLY *for="#item of items"
它似乎在开发过程中已经发生了很大的变化,所以如果它再次发生变化我也不会感到惊讶。
从 alpha 28 到 30,语法如下:
import { NgFor } from 'angular2/angular2';
@View({ directives: [NgFor] })
<div *ng-for="#item of items">
Angular 2.0 版本
我的-component.ts:
import { Component } from 'angular2/core';
@Component({
selector: 'my-component',
templateUrl: './my-component.html'
})
export class MyComponent{
public values: number[] = [1, 2, 3];
}
我的-component.html:
<div *ngFor='let value of values; trackBy: index;'>
{{ value }}
</div>
对于 angular 8 及更高版本,正确的语法是
<ul>
<li *ngFor="let hero of heroes">
{{ hero }}
</li>
</ul>