Угловой 7, компонент выбора + HTML-селектор

Question

Я пытаюсь выучить Angular 7 и кодирую Todo-List, для которого я сделал компонент строки таблицы и компонент общей таблицы. Проблема в том, что моя структура DOM выглядит следующим образом:

таблица> tbody> app-too> tr> td

, который уничтожает отображение таблицы

Я уже прочитал много ответов блогов (к сожалению, для более старых версий Angular), но ни один из них не решил мою проблему.

todo.component.html

<tr>
  <td>{{ todo.id }}</td>
  <td>{{ todo.createdAt }}</td>
  <td>{{ todo.description }}</td>
  <td
    (click)="toggleTodo()">
  </td>
</tr>

todo.component.ts

import {Component, EventEmitter, Input, Output} from '@angular/core';

@Component({
  selector: 'app-todo',
  templateUrl: './todo.component.html',
  styleUrls: ['./todo.component.scss']
})
export class TodoComponent {

  @Input('todo') todo: any;

}

TODO-table.component.html

<table>
  <tbody>
  <app-todo *ngFor="let todo of todos"
    [todo]="todo"
  </app-todo>
  </tbody>
</table>

Я уже попробовал версию todo-table.component.html примерно так

<table>
  <tbody>
  <tr *ngFor="let todo of todos"
    app-todo
    [todo]="todo"
  </tr>
  </tbody>
</table>

с моим компонентом строки, исключая тег tr. Но это дает проблему времени компиляции:

Невозможно связать с 'todo', поскольку оно не является известным свойством 'tr'

Я ищу обходной путь, при котором мой элемент app-todo может быть как-то похож на элемент tr, чтобы моя таблица отображалась правильно. Заранее спасибо.

Answer 1

У вас есть ввод для todo-table.component, который должен использоваться в html.

Попробуйте использовать это вместо todos, так как todos не определен в todo-table.component.

Также обновите ваш селектор, чтобы использовать [app-todo] вместо app-todo, так как вы используете <tr *ngFor="let todoItem of todo" app-todo, как предложено в комментариях @JB Nizet

<table>
  <tbody>
  <tr *ngFor="let todoItem of todo"
    app-todo
    [todo]="todoItem"
  </tr>
  </tbody>
</table>