Question

我正在尝试创建一个带有嵌套行组件的表，这是我拥有的：

父文件：

<table class="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>TITLE</th>
      <th>DESCRIPTION</th>
      <th>USER</th>
      <th>OWNER</th>
    </tr>
  </thead>
  <app-ticket *ngFor="let ticket of tickets" [ticket]="ticket"></app-ticket>
</table>

应用程序门票：

<tr>
  <td>{{ticket.id}}</td>
  <td>{{ticket.title}}</td>
  <td>{{ticket.description}}</td>
  <td>{{ticket.email}}</td>
  <td>{{ticket.owner}} <button class="btn btn-warning">TEST</button></td>
</tr>

但是行上的引导程序样式不起作用，我进行了搜索，人们建议将tr / td放在根组件中，但这有时是不可行的，特别是对于多级组件，是否有一个很好的解决方案这个吗？

Answer 1

一种实现此目的的方法是使组件成为类似指令的组件：

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

    @Input() ticket: Ticket;

}

html模板：

<td>{{ticket.id}}</td>
<td>{{ticket.title}}</td>
<td>{{ticket.description}}</td>
<td>{{ticket.email}}</td>
<td>{{ticket.owner}} <button class="btn btn-warning">TEST</button></td>

然后像这样使用它：

<tr app-ticket *ngFor="let ticket of tickets" [ticket]="ticket"></tr>

这将直接在表内部呈现tr，而不是为组件保留标签。

Angular-Bootstrap样式不适用于嵌套组件

1 个答案: