我想在单击按钮时显示特定顺序的详细信息,但是它会在每个订单上呈现,因为这是for循环

问题描述 投票:2回答:4
<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循环时,它会在每一行下面呈现。单击按钮时,我希望显示特定的订单详细信息。

enter image description here

angular
4个回答
3
投票

它出现在每一行的下方,因为详细信息是一个全局变量,它与所有行共享。因此,单击该按钮后,细节将变为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>

1
投票

这里有很多问题。

首先你的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方法,用他的答案在几秒钟内击败我;)


0
投票

我不确定,但你可以这样做

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

0
投票

这有很多问题。首先,你不能让<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>
© www.soinside.com 2019 - 2024. All rights reserved.