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

问题描述 投票:1回答:1

我正在尝试学习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元素,以便我的表格正确显示。提前致谢。

angular angular7
1个回答
0
投票

您有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>
© www.soinside.com 2019 - 2024. All rights reserved.