如何将相应的项目详细信息传递给模态 ng2-bootstrap？

Question

显示项目的更多详细信息。当我点击相应的项目时，我想在模式中显示它的相应详细信息。

这是我的代码

<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[= 中的模态26=]

<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">×</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

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

希望以上内容对您有所帮助。

Answer 2

我是这么想的。

我又创建了一个函数，并通过该函数调用传递了所需的数据。

在我的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>

如何将相应的项目详细信息传递给模态 ng2-bootstrap？

how to pass respective item details to a modal ng2-bootstrap?

ng2-bootstrap

angular