Angular - ngForディレクティブによるデータバインド

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コード）のデータソース（コンポーネントクラス）の情報を表示するには補間。これは、テンプレートの二重中括弧構文{{}}を使用して行うことができます。これを行うことで、自動的にデータソースをテンプレートにバインドします。つまり、データソース内のデータが変更された場合、その変更はテンプレートに反映されます。

私は、ドキュメントの次のセクションを読み取るためのuをお勧めします： https://angular.io/docs/ts/latest/guide/template-syntax.html

はそれが役に立てば幸い！