时间戳

首页 > 解决方案 > 表格行之间的角度显示组件

html - 表格行之间的角度显示组件

问题描述

我在一个组件中有一个表格视图，其中包含使用 *ngFor 指令呈现的行。当用户单击特定行时，我想在该行下方显示一个子组件。以下是我的代码。

<tbody>
<ng-container *ngFor="let item of items" >
<tr (click)="expand(item)">
  <td>{{item.name}}</td>
  <td>{{item.title}}</td>  
  <td>{{item.description}}</td>
</tr>
<tr *ngIf="isexpanded(item)">
  <app-item-comp [item]="item"></app-item-comp>
</tr>
</ng-container>

当我单击一行时，这将显示子组件 app-item-comp。但它的宽度与行的第一个元素相同，而不是占据整个窗口。我想查看这个具有整个表格宽度的子组件。我怎样才能做到这一点？谢谢。

标签： htmlangulartypescript

解决方案

// Consider below code is in you ts file

let items: any = [
    {
        itemName: 'ABC',
        itemId: '1',
        isSubRowDisplayed: false
    },
    {
        itemName: 'PQR',
        itemId: '2',
        isSubRowDisplayed: false
    },
    {
        itemName: 'MNO',
        itemId: '3',
        isSubRowDisplayed: false
    }
];

expand(clickedItem: any): any {
    clickedItem.isSubRowDisplayed = !clickedItem.isSubRowDisplayed;
}
<tbody>
<ng-container *ngFor="let item of items" >
<tr (click)="expand(item)">
  <td>{{item.name}}</td>
  <td>{{item.title}}</td>  
  <td>{{item.description}}</td>
</tr>
<tr *ngIf="item?.isSubRowDisplayed">
  <app-item-comp [item]="item"></app-item-comp>
</tr>
</ng-container>

推荐阅读