无法绑定到“ ngFor”，因为它不是已知的本机属性

Question

Hey I know this question comes up a lot but the normal fixes do not work. I tried the # way of typing and much more. Here is my code:

<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>

It is a table in a table that needs to walk through all the ToDo's in the array toDoArray. Here is my contructor:

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

I added a Plukr

Answer 1

Put the iteration in the tr instead, I guess that is what you want to achieve :)

<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:

Remember to initialize the array in the beginning, like: private toDoArray : ToDo[] = []; That should solve (problem), not knowing if you get to see any results in your table at all, but if you do get to see some values in your table...

The reason why your template is all messed up, is because you are somehow trying to nest the tables, that just results in a hot mess like you have going on there. I see you want to separate ToDo's based on their status. Just make them 3 separate tables and you are good to go, that would be my suggestion! :)

Your forked plunker with the above changes.