css - Bulma 表行不跨越全宽

Question

我的 angular7 应用程序中有一个 is-fullwidth Bulma 表，它工作正常。但现在我需要在每一行内添加一个 Angular 组件，并且 td 标签位于该组件内。但是当我这样做时，表格行不会跨越其全宽。

<table class="table is-fullwidth">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of rows">
      <app-table-row [details]="row">
      </app-table-row>
    </tr>
  </tbody>
</table>

table-row.component.html

<td>
  <div *ngIf="!showField"> {{ details.name }} </div>
  <div *ngIf="showField" class="field">
    <div class="control">
      <input [value]="details.name" class="input" type="text">
    </div>
  </div>
</td>

<td>{{ details.address }}</td>

输出如下

如果我删除 Angular 组件并正常添加 td，它会正确跨越。像这样。

为什么添加angular组件后不起作用？我该如何解决？

Answer 1

发生这种情况的原因可能是因为 td元素不是 tr 的直接子元素, 但 child 是 app-table-row组件。

不确定这对您的情况是否有意义，但您可以更改 app-table-row 中的选择器属性选择 tr 的组件本身，像这样:

@Component({
    selector: 'tr[app-table-row]',
    ...
})
export class AppTableRowComponent  {}

然后像这样使用它:

<table class="table is-fullwidth">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let row of rows" app-table-row [details]="row">
    </tr>
  </tbody>
</table>

这边app-table-row不是 DOM 中的单独节点。