I've read various issue tracker entries in relation to Angular 2 and its implementation of ng-repeat, but as it stands I haven't actually worked out if it actually exists yet.
Is it possible to use ng-repeat in angular 2?
Angular 2.0 Release
my-component.ts:
import { Component } from 'angular2/core';
@Component({
selector: 'my-component',
templateUrl: './my-component.html'
})
export class MyComponent{
public values: number[] = [1, 2, 3];
}
my-component.html:
<div *ngFor='let value of values; trackBy: index;'>
{{ value }}
</div>
From alpha 28 to 30 it's the following syntax:
import { NgFor } from 'angular2/angular2';
@View({ directives: [NgFor] })
<div *ng-for="#item of items">
UPDATE: this comment is now out of date, please see accepted answer
OK, CURRENTLY, the following works.
/// <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);
}
}
What I was missing
You need to import For (line 3)
You need to declare your dependency of For for the component in question (line 9)
The correct syntax for "ng-repeat" is CURRENTLY *for="#item of items"
It seems to have changed quite a bit already during developing so I would not be surprised if it changes again.
来源:https://stackoverflow.com/questions/30505233/does-ngrepeat-exist-in-angular-2