Javascript 作为单个组件的多个表行

在单个角度组件中有多个表行的方法是什么？ 我希望在给定列表的每个项目中显示两行，并将其放在HTML表中

我尝试使用带有组件作为属性的ng模板，以避免组件标记破坏表流，但在这种情况下，输入不起作用。理想情况下，我正在寻找一种从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>

{{person.name}
{{person.city}
最后连接
{{person.lastConnection}
为什么不将
tr
包含在
ng容器
标签中

<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>


名城
{{person.name}
{{person.city}
最后连接
{{person.lastConnection}

如果要使用组件，请执行以下操作：

<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>


名城
为什么不将
tr
包含在
ng容器
标签中

<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>


名城
{{person.name}
{{person.city}
最后连接
{{person.lastConnection}

如果要使用组件，请执行以下操作：

<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>


名城
尝试以下操作：

<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>


名城
{{person.name}
{{person.city}
最后连接
{{person.lastConnection}

Stackblitz:
尝试以下操作：

<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>


名城
{{person.name}
{{person.city}
最后连接
{{person.lastConnection}

Stackblitz:
我最终通过使用
display:table row group使其不破坏表dom流：）
我最终通过使用
display:table row group使其不破坏表dom流：）
您试图从DOM中删除组件标记有什么特殊原因吗？您可以简单地使用它，它应该可以工作，如果您想隐藏/删除它，只需传递一个@Input变量来控制它的可见性Tables只允许使用与表相关的标记（td、tr、th…）。组件标记会破坏其内部tr标记的预期表行为。您不能像这样使用
<在这种情况下，代码>应用程序定位人员
将是一个指令。如果我错了，请纠正我，但您无法将模板绑定到指令。：）为什么不将整个表注入子组件中？@mattwortspieler我已经将一个指令的html绑定到一个div，以保留以前的框架结构。显然，div不同于ng容器。我将其定义为一个组件，但选择器设置为：
[app located person]
，因此它将其应用于使用特定属性的任何地方。我知道，这就是问题的目的；）我简化了这个示例，但实际上我希望row组件调用一些内部数据来显示，但是只有当它被扩展时，您是否有任何特定的原因试图从DOM中删除组件标记？您可以简单地使用它，它应该可以工作，如果您想隐藏/删除它，只需传递一个@Input变量来控制它的可见性Tables只允许使用与表相关的标记（td、tr、th…）。组件标记会破坏其内部tr标记的预期表行为。您不能像这样使用
<在这种情况下，代码>应用程序定位人员
将是一个指令。如果我错了，请纠正我，但您无法将模板绑定到指令。：）为什么不将整个表注入子组件中？@mattwortspieler我已经将一个指令的html绑定到一个div，以保留以前的框架结构。显然，div不同于ng容器。我将其定义为一个组件，但选择器设置为：
[app located person]
，因此它将其应用于使用特定属性的任何地方。我知道，这就是问题的目的；）我简化了这个示例，但实际上我希望row组件调用一些内部数据来显示，但只有当它被展开时，fyi（角度材质）才使用flex，而不是“经典”HTML表。可能是一个解决方法。仅供参考，在Angular Material中，对于他们的表格组件，他们使用flex而不是“经典”HTML表格。可能是一个解决办法。