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，因为todo-table.component中未定义todos。

还要更新选择器，以使用[app-todo]代替app-todo，因为@JB Nizet的注释中建议使用<tr *ngFor="let todoItem of todo" app-todo

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

Angular 7，组件选择器+ html选择器

1 个答案: