Question

如果单击表中的任何行，我都有一个表，它将在表的右侧显示有关该行的更多详细信息。

我已经在ts上声明了布尔变量，我将设置为true或false。

现在的问题是，如果我单击第一行，它将获取详细信息并显示它。如果我单击第一行或表中的任何行，则不会显示先前显示的详细信息。

实际上我想做的是，我单击第一行，它应该显示详细信息。如果我单击任何其他行，则应隐藏先前显示的详细信息，并应显示新的详细信息。我如何仅通过使用angular 7和打字稿来实现此目的。

ts：

show = false; 
details(id:number){
this.show= !this.show;          
     //inject service to fetch the data 
 }


<div class="row">
 <div class="col-md-5">
    <table>
      <tbody>
         <tr *ngFor="let order of Orders" (click)="details(order.id)"   
            class='clickable-row'>
               <td>  //display details </td>
         </tr>
     </tbody>
    </table> 
 </div>

 <div class= "col-md-6">
   <div *ngIf="show"> 
      <mat-card> 
         <mat-card-content>
             //display details here 
         </mat-card-content> 
      </mat-card>
   </div>
</div>

Answer 1

我建议您在当前组件中构建一个子组件，仅用于显示详细信息，然后使用属性绑定将特定行的详细信息传递给子组件，这样当您使用@input（）时便可以访问它在子组件中。每次都会更改，因为Angle会在后台为您做更艰巨的任务

Answer 2

使用Property Interpolation。

<div class= "col-md-6">
 <div *ngIf="show"> 
  <mat-card> 
   <mat-card-content>
         {{RowDetails}}
     </mat-card-content> 
  </mat-card>
  </div>
  </div>

在.ts文件中，将名为RowDetails的属性初始化为空字符串（或w / e）。在onClick事件中，将RowDetails设置为该行的详细信息。

通过单击角度7中的一行来显示和隐藏组件

2 个答案: