我正在尝试学习Angular 7,我正在编写一个Todo-List,为此我创建了一个表行组件和一个通用表组件。问题是我的DOM结构看起来像这样:
table> tbody> app-too> tr> td
它会破坏桌面显示
我已经阅读了很多blogposts的答案(遗憾的是,对于旧版本的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;
}
待办事项,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元素,以便我的表格正确显示。提前致谢。
您有todo-table.component
的输入,应该在html中使用。
尝试使用此代替todos
,因为todo未在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>