<tbody>
<ng-container *ngFor="let orderdetail of listoforderdetail.listoforders">
<tr>
<td>{{orderdetail.orderId}}</td>
<td>{{orderdetail.ammount | currency:"Rs. "}}</td>
<td>{{datepipe.transform(orderdetail.orderDate,'yyyy-MM-dd HH:mm:ss')}}</td>
<td><button class="btn primary sm" (click)="details=true">Details</button></td>
</tr>
<div *ngIf="details">detail will come here when we click on button on specific ordder</div>
</ng-container>
</tbody>
当我点击任何一行订单表的详细信息按钮时,细节会被渲染,但是当我的按钮和div处于for循环时,它会在每一行下面呈现。单击按钮时,我希望显示特定的订单详细信息。
它出现在每一行的下方,因为详细信息是一个全局变量,它与所有行共享。因此,单击该按钮后,细节将变为true,并且每行的ngif条件均为true。
您需要具有取决于行本身的条件,因此只有所选行才可见
<tbody>
<ng-container *ngFor="let orderdetail of listoforderdetail.listoforders">
<tr>
<td>{{orderdetail.orderId}}</td>
<td>{{orderdetail.ammount | currency:"Rs. "}}</td>
<td>{{datepipe.transform(orderdetail.orderDate,'yyyy-MM-dd HH:mm:ss')}}</td>
<td><button class="btn primary sm" (click)="orderdetail.visible=true">Details</button></td>
</tr>
<div *ngIf="orderdetail.visible">detail will come here when we click on button on specific ordder</div>
</ng-container>
</tbody>
这里有很多问题。
首先你的html输出是错误的,因为你不能在<div>
中拥有<table>
。你应该改变它
<tr>
<td colspan="4" *ngIf="[your-condition]">
<div *ngIf="details">detail will come here when we click on button on specific ordder</div>
</td>
</tr>
其次你只有一个变量details
,你用(click)
设置。
每个<div *ngIf="details">
检查此变量(相同的实例)
您可以将<ng-container>
中的所有内容移动到自己的组件中,也可以使用@Kepotx方法,用他的答案在几秒钟内击败我;)
我不确定,但你可以这样做
<tbody>
<ng-container *ngFor="let orderdetail of listoforderdetail.listoforders; let i = index">
<tr>
<td>{{orderdetail.orderId}}</td>
<td>{{orderdetail.ammount | currency:"Rs. "}}</td>
<td>{{datepipe.transform(orderdetail.orderDate,'yyyy-MM-dd HH:mm:ss')}}</td>
<td><button class="btn primary sm" (click)="details + i=true">Details</button></td>
</tr>
<div *ngIf="details + i">detail will come here when we click on button on specific ordder</div>
</ng-container>
</tbody>
这有很多问题。首先,你不能让<div>
成为<tr>
的兄弟姐妹。除了HTML有效性之外,主要问题是你正在为循环中的每个项重复使用details
变量。因此当details=true
为一个时,它对所有人都是真的。您需要为循环中的每个项目设置一个本地范围的变量。我不是角度编码器,我没有办法测试这个,但这样的事情应该有效。
<tbody>
<ng-container *ngFor="let orderdetail of listoforderdetail.listoforders">
<tr>
<td>{{orderdetail.orderId}}</td>
<td>{{orderdetail.ammount | currency:"Rs. "}}</td>
<td>{{datepipe.transform(orderdetail.orderDate,'yyyy-MM-dd HH:mm:ss')}}</td>
<td><button class="btn primary sm" (click)="orderdetail.showdetails=true">Details</button></td>
</tr>
<div *ngIf="orderdetail.showdetails">detail will come here when we click on button on specific order</div>
</ng-container>
</tbody>