angular.js(2) 数据的渲染

angular-（2）

把数据添加到组件中

eg：
ng generate component user-item
在user-item.component.ts中。

• 定义 name：string；//定义name属性
• 在构造函数里写入constructor(){ this.name = 'Alice'}
• 在组件中渲染的时候用双花括号法。<p>{{name}}</p>

使用数组添加到组件中

eg:

• 定义数组 names:string[]

• 构造函数 constructor(){ this.name = ['Ari','Carlos','Felipe','Nate']}

• 渲染的时候需要用到ngFor

    <ul>
    <li *ngFor="let name of names">{{name}}</li>
    </ul>
  

在组件中套用自定义组件

@Input注解

在user-item.compnent.ts中接收输入。
@Input() name；string;
在user-list.component.html
<ul><app-user-item *ngFor="let name of names" [name]="name"></ul>
注意这里的let name 和下面的 “name” 需保持一致性