2017-02-02 2 views
1

この質問は多く出ますが、通常の修正は機能しません。 私はタイピングなどの方法を試しました。'ngFor'にバインドできません。これは既知のネイティブプロパティではないためです。

<table> 
    <tr> 
    <th>Name</th> 
    <th>Desc</th> 
    <th>Time est</th> 
    </tr> 
    <div *ngFor="let ToDo of toDoArray"> 
    <tr> 
    <td>{{ToDo.Name}}</td> 
    <td>{{ToDo.Desc}}</td> 
    <td>{{ToDo.Time}}</td> 
    </tr> 
    </div> 
    </table> 

それは、アレイtoDoArray内のすべてのToDoの中を歩く必要があり、テーブル内のテーブルがある: はここに私のコードです。ここで は私のコンストラクタです:

constructor(){ 
    this.toDoArray.push(
     new ToDo("The name","You know", "20 min") 
); 
} 

私はPlukr

+0

'tr'で動作するはずです。私は簡単な例を作った。 https://plnkr.co/edit/XBiqRJyNIu5NyhcsMgSL?p=preview –

+0

あなたは 'this.toDoArray'を初期化していません。少なくともプランカにはない。それがあなたの問題の鍵であることを考えれば、あなたは読んでみたいかもしれません:http://stackoverflow.com/help/mcve – silentsod

答えて

3

ではなくtrで反復を入れて追加、私はそれはあなたが達成したいものであると思います:)

<table> 
    <tr> 
    <th>Name</th> 
    <th>Desc</th> 
    <th>Time est</th> 
    </tr> 
    <tr *ngFor="let ToDo of toDoArray"> 
    <td>{{ToDo.Name}}</td> 
    <td>{{ToDo.Desc}}</td> 
    <td>{{ToDo.Time}}</td> 
    </tr> 
</table> 

EDIT:

冒頭で配列を初期化することを忘れないでください。 private toDoArray : ToDo[] = [];あなたはあなたのテーブルに何かの結果を見られるかどうかを知ることなく、(問題)を解決する必要がありますが、あなたのテーブルにいくつかの値を見ることができたら...

あなたのテンプレートがすべて混乱している理由あなたが何らかの形でテーブルを入れようとしているからです。あなたがそこにいるような熱い混乱を招くだけです。彼らのステータスに基づいてToDoを分離したいと思う。それらを3つの別々のテーブルにして、あなたは行き​​たい、それは私の提案です! :)

上記の変更を加えたplunker

+0

それはきれいなコードですが、私はまだ同じエラーが発生します。 – Nick

+0

Hmm。いくつかのコードを共有したり、ここで何も明らかにならないようにしたり、もっと良い点を挙げたりして、問題を再現する必要があります:) – Alex

+0

これはうまくいくはずです。私はデモを作った。 https://plnkr.co/edit/XBiqRJyNIu5NyhcsMgSL?p=preview –

関連する問題