Angular 2 table 行组件呈现到第一列中 header

Question

我在 pupil-list 组件中有这个 html table：

  <table class="table">
    <thead>
      <th>id</th>
      <th>Selektiert</th>
      <th>Name</th>
      <th>Aktion</th>
      <th>Fächer</th>
    </thead>
    <tbody>
      <tr *ngFor="let p of pupils; let i = index">
           <pupil-detail-display *ngIf="!isEditTemplate(p)"
      (selectedPupilUpdated)="onSelectedPupilUpdated($event)"
       [pupil]="p" ></pupil-detail-display>

    <pupil-detail-edit *ngIf="isEditTemplate(p)"
    (savedAddedPupil)="onSavedAddedPupil($event)"
    (savedEditedPupil)="onSavedEditedPupil($event)"
     (cancelledEditingPupil)="onCancelledEditingPupil()" [pupil]="p" ></pupil-detail-edit>
      </tr>
    </tbody>
  </table>

两个组件 pupil-detail display/edit 各包含 5 td-tags。

这 5 个 td-tags 呈现 INTO 第一个 th-tag 因为包含的组件也是在 dom.

中呈现为 html 元素

你会如何解决 UI 现在看起来坏了这样一个实际常见的问题？

注意

考虑到组件是在运行时动态切换的。我无法将该组件作为包装器删除...

Answer 1

当您使用 table 元素时，您必须在 tr 元素内有一个 td 元素，否则浏览器将尝试通过假设元素超出 table body（至少在 chrome 之外）来修复此标记错误，这就是为什么您将其视为 header.

我的建议是重新排列您的标记，将您的 2 个内部组件合并为一个，并为该组件使用属性选择器。

例如：

<tr *ngFor="let p of pupils; let i = index"
   pupil-detail
   (selectedPupilUpdated)="onSelectedPupilUpdated($event)"
   (savedAddedPupil)="onSavedAddedPupil($event)"
   (savedEditedPupil)="onSavedEditedPupil($event)"
   (cancelledEditingPupil)="onCancelledEditingPupil()" [pupil]="p"
</tr>

这是 pseudo-code pupil-detail-component:

@Component({
    selector: '[pupil-detail]',
    template: `<td *ngIf="edit"></td>.............<td></td>
})
class pupilDetail {
    constructor() {
    }
    *you code from both compnents*
}

Answer 2

如您所述，table 标记不正确。

如果 public-detail-display 和 public-detail-edit 实际上是 table 行，那么您可以将它们合并到一个组件中，将其标记为具有属性的 tr 元素-选择器并利用 *ngFor 变量 even 和 odd 在应呈现的行类型（显示或编辑）之间切换。

Angular 2 table 行组件呈现到第一列中 header

Angular 2 table row component is rendered into the first column header

angular2-directives

angular2-template

angular