用* ngfor扩展和折叠角度为7的行

Question

在我的模板中，我使用* ngFor并在表中显示详细信息。当我单击行时，它必须提供有关该行的更多信息。

当前我在表格后显示详细信息，现在如何在相应的下方显示。我知道我必须使用Bootstrap中的崩溃，但不知道如何实现。

<table class="table" style="text-align:center">
    <thead>
       <tr>
           <th scope="col">Sender </th>
           <th scope="col">Receiver </th>
           <th scope="col">Shipment</th>
      </tr>
   </thead>
     <tbody>
       <tr *ngFor ="let order of Orders|filter : search" (click) = 
           "details(order.id)"  class="cursorstyle">
              <td>       {{ order.user | titlecase }}    </td> 
              <td>       {{ order.user | titlecase }}    </td> 
              <td>        {{ order.lane.Daddress | titlecase }}   </td> 
       </tr>              
     </tbody>
  </table>
    <div *ngIf = "detailvisible">
        <div *ngIf = "orderdetails"> 
                  //display details orderdetails 
        </div> 
    </div> 

打字稿：

      details(id:number){

          this.detailvisible = !this.detailvisible;
          this.displayservice.getorderdetails(id).subscribe(data => 
          this.orderdetails = data);

 }