布尔玛表行未跨越全宽

Question

我的angular7应用程序中有一个is-fullwidth Bulma表，可以正常工作。但是现在我需要在每行内添加一个角度组件，并且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>

这将输出以下内容

如果我移除角度分量并正常添加td，则其跨度正确。像这样。

为什么添加角度分量后它不起作用？以及我该如何解决？

Answer 1

发生这种情况的原因可能是因为td元素不是tr的直接子元素，而是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中的单独节点。