Question

在单个Angular组件中具有多个表行的方法是什么？我想在给定列表的每个项目中显示两行，并将其存储在HTML表中。

我尝试使用带有组件属性的ng-template来避免组件标签破坏表流，但是在这种情况下，输入将不起作用。理想情况下，我正在寻找一种从dom中删除组件标签的方法...

<table>
  <thead>
    <th>Name</th><th>City</th>
  </thead>
  <tbody>
    <ng-container app-located-person
                  *ngFor="let person of persons"
                  [person]="person">
    </ng-container>
  </tbody>
</table>

应用定位的人

<tr>
  <td>{{ person.name }}</td>
  <td>{{ person.city }}</td>
</tr>
<tr *ngIf="details">
  <td>Last connection</td>
  <td>{{ person.lastConnection }}</td>
</tr>

Answer 1

我最终通过在组件节点上使用display: table-row-group;来不破坏表dom流：）

Answer 2

为什么不在tr标记中包含ng-container？

<table>
  <thead>
    <th>Name</th><th>City</th>
  </thead>
  <tbody>
    <ng-container 
     *ngFor="let person of persons"
     [person]="person">
       <tr>
         <td>{{ person.name }}</td>
         <td>{{ person.city }}</td>
       </tr>
       <tr *ngIf="details">
         <td>Last connection</td>
         <td>{{ person.lastConnection }}</td>
       </tr>
    </ng-container>
  </tbody>
</table>

如果要使用组件：

<table>
  <thead>
    <th>Name</th><th>City</th>
  </thead>
  <tbody>
    <ng-container 
     *ngFor="let person of persons">
       <app-located-person [person]="person"></app-located-person>
    </ng-container>
  </tbody>
</table>

Answer 3

尝试以下操作：

<table>
  <thead>
    <th>Name</th><th>City</th>
  </thead>
  <tbody>    
    <ng-container *ngFor="let person of persons">
      <tr>
        <td>{{person.name}}</td>
        <td>{{person.city}}</td>
      </tr>
      <tr *ngIf="person.lastConnection">
        <td>Last connection</td>
        <td>{{person.lastConnection}}</td>
      </tr>      
    </ng-container>
  </tbody>
</table>

Stackblitz：Link

多个表行作为单个组件

3 个答案: