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传递给模式哪个组件

  <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> 然后只是显示关于模态的点击记录细节，我认为你不需要再次对模态进行迭代，因为它的单数记录。

我希望这对你有帮助。

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

2 个答案: