Невозможно связать с 'ngFor', так как это не известное нативное свойство

Question

Эй, я знаю, что этот вопрос часто возникает, но нормальные исправления не работают. Я попробовал # способ набора текста и многое другое. Вот мой код:

<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. Вот мой конструктор:

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

Я добавил Плюкр

Answer 1

Поместите итерацию в 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>

РЕДАКТИРОВАТЬ:

Не забудьте инициализировать массив в начале, например: private toDoArray : ToDo[] = []; Это должно решить (проблему), не зная, видите ли вы какие-либо результаты в вашей таблице вообще, но если вы действительно видите некоторые значения в своей таблице...

Причина, по которой ваш шаблон испорчен, заключается в том, что вы каким-то образом пытаетесь вложить таблицы, что просто приводит к тому, что у вас возникает беспорядок. Я вижу, вы хотите разделить задачи в зависимости от их статуса. Просто составьте для них 3 отдельные таблицы, и вы готовы идти дальше, это было бы моим предложением!:)

Ваш раздвоенный плункер с вышеуказанными изменениями.