33

我已经阅读了有关 Angular 2 及其 ng-repeat 实现的各种问题跟踪器条目，但就目前而言，我还没有真正弄清楚它是否真的存在。

可以ng-repeat在角度2中使用吗？

4

4 回答 4

51

Angular 2.0 发布

我的组件.ts：

import { Component } from 'angular2/core';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.html'
})
export class MyComponent{
  public values: number[] = [1, 2, 3];
}

我的组件.html：

<div *ngFor='let value of values; trackBy: index;'>
  {{ value }}
</div>
于 2015-12-16T13:58:43.860 回答
3

更新：此评论现已过时，请参阅已接受的答案

好的，目前，以下工作。

/// <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"

它似乎在开发过程中已经发生了很大变化，所以如果它再次发生变化，我不会感到惊讶。

于 2015-05-28T11:57:49.663 回答
3

从 alpha 28 到 30，它的语法如下：

import { NgFor } from 'angular2/angular2';

@View({ directives: [NgFor] })  

<div *ng-for="#item of items">
于 2015-07-13T19:12:16.387 回答
1

对于角度 8 及以上，正确的语法是

<ul>
    <li *ngFor="let hero of heroes">
      {{ hero }}
    </li>
</ul>
于 2020-05-17T21:38:42.227 回答