Question

我在angularjs 2中使用ng-repeat和自定义模板，但它无法正常工作

html

<tr ng-repeat="data in itemList">
    <td>{{data.test}}</td>
</tr>

.ts

import {Component, View} from "angular2/core";

@Component({
   selector: 'my-app',
   templateUrl: 'app/hello.component.html'
})

export class AppComponent {

    public itemList = [
      {name:"Apple", test:"1"},
      {name:"Orange", test:"2"},
      {name:"Grapes", test:"3"},
   ];


}

我不知道问题是什么。它在Angularjs 1工作，但Angularjs 2不工作

Answer 1

您应该使用 *ngFor 而不是ng-repeat。 angular2没有ng-repeat。

将其更改为，

<tr *ngFor="let data of itemList">
    <td>{{data.test}}</td>
</tr>

<强> DEMO

Answer 2

Here is full syntax of code.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `

  <p>List:</p>
  <ul>
    <li *ngFor="let item of itemList">
      {{ item.name }} {{item.test}}
    </li>
  </ul>
`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  public carsList: Array<string>;
  public itemList = [
    { name: "Apple", test: "1" },
    { name: "Orange", test: "2" },
    { name: "Grapes", test: "3" },
  ];
}

Angularjs 2 ng-repeat不起作用

2 个答案: