如何将各个项目详细信息传递到模态NG2-Bootstrap

Question

我正在使用ng2-bootstrap modal

显示项目的更多详细信息。当我单击相应的项目时，我想显示其各自的详细信息。

这是我的代码

<table  class="table table-hover table-bordered table-striped tableheader">
<thead>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Gender</th>
    <th>City</th>
    <th>Country</th>
    <th>Age</th>
  </tr>
</thead>
  <tbody *ngFor="let item of results$ | async" >
     <tr   (click)="lgModal.show(item)">
      <td>
       {{item.firstName}}
      </td> 
      <td>{{item.lastName}}</td>
      <td>{{item.gender}}</td>
      <td>{{item.city}}</td>
      <td>{{item.country}}</td>
      <td>{{item.age}}</td>
    </tr>
  </tbody>
</table>

当我单击相应的行时，我只想传递各自的用户其他详细信息，但是它将我的结果$的完整json传递给了模式，该模态在相同的 component

中

  <div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="lgModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title">Complete Details</h4>
      </div>
      <div class="modal-body">
        <div  >
           {{ item | json }} // not getting item details here
        </div>
      </div>
    </div>
  </div>
</div>

如何做？

Answer 1

这就是我解决的方式。

我创建了一个函数，然后通过该功能调用传递了所需的数据。

在我的 component.html

中

<tr (click)="onClick(item,lgModal)">

在我的 component.ts

中

public selecteditem: Observable<Object>;
 onClick(item:any, lgModal:any){
   this.selecteditem = item;
   lgModal.show()
  //  console.log(this.selecteditem); // print in console
 }

模态（在 component.html 中）

    <div class="modal-body">
     <pre>{{ selecteditem | json }}  </pre>
       // Example 
         <h5>SChool Name:{{selecteditem?.schoolName}}</h5>
      </div>

Answer 2

如果我理解您的问题，那么您已经忘记了将相应的项目ID传递给您的模态，从列表UI将其传递给您的模式。例如
<tr> <td><button type="button" (click)="lgModal.show(item.id)"></button></td></tr>然后只需在模态上显示单击的记录详细信息，我认为您不需要在模态上再次迭代。

我希望这对您是正确的和有帮助的。