Question

我是角色新手，我不确定如何将数据呈现为HTML标记。如何在组件模板中显示组件数据？

此plnkr中有一个小的复制品。

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

@Component({
  selector: 'my-app',
  template: `<ul class= "master">
                <li *ngFor ="let student of liArraycontent">  </li>
              </ul>`
})
export class AppComponent { 
  name = 'Angular';
  liArraycontent = ["testing 1", "testing 2", "testing3"]


}

Answer 1

因此，在列表代码内部执行此操作：

<li *ngFor ="let student of liArraycontent">{{student}}</li>

同样，如果你有一个对象数组，你可以只做{{student.name}}或该对象的任何其他属性

Answer 2

要在模板中显示数据源（组件类）的信息（html代码），您需要使用插值。您可以使用模板内部的双花括号语法{{}}来完成此操作。通过这样做，您将自动将数据绑定到一个方向：数据源到模板。这意味着，如果数据源中的数据发生更改，则更改将反映在模板中。

我建议您阅读以下文档部分： https://angular.io/docs/ts/latest/guide/template-syntax.html

希望它有所帮助！

Angular - 使用ngFor指令进行数据绑定

2 个答案: