从数组列表中选择数组并以模式显示信息

Question

我有一个数据 table，我在其中显示 "id"、"reason"、"errorMessage" 和 "stackTrace" 等信息。我运行一个 angular for 循环来显示这些信息，但我试图跟踪索引并在我单击数组中的数据时以模式显示信息。我如何将索引解析为我的模态，以便我可以在那里显示信息？

这是我的数据Table:

<!-- Data Table -->
<table class="table table-hover">
  <thead class="thead-dark">
    <tr>
      <th>Id</th>
      <th>Name</th>
      <th>ErrorMessage</th>
      <th>StackTrace</th>
    </tr>
  </thead>
  <tbody *ngFor="let item of ListOfTestResults; let i = index;">
    <tr class="rows" data-toggle="modal" data-target="#exampleModal" [ngClass]="{'table-success': item.match, 'table-danger': !item.match}">
      <th scope="row">
        <div style="width: 100px; height: 200px px; overflow: auto">
          <p>{{item.testResultId}}</p>
        </div>
      </th>

      <td>
        <div style="width: 250px; height: 200px; overflow: auto">
          <p>{{item.testCaseTitle}}</p>
          <br>
          <p> reason : {{ item.reason }}</p>
        </div>
      </td>

      <td>
        <div style="width: 550px; height: 200px; overflow: auto">
          <p>{{item.errorMessage}}</p>
        </div>
      </td>
      <td>
        <div style="width: 500px; height: 200px; overflow: auto">
          <p>{{item.stackTrace}}</p>
        </div>
      </td>
    </tr>
  </tbody>
</table>

这是我尝试显示数组中数据的模态。我的模式是使用 bootstrap.

创建的

     <!-- Modal -->
      <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                {{i}}.{{item.testCaseTitle}}
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
              </div>
            </div>
          </div>
        </div>

这是我的数据 table 的图片。 Table 是可点击的，当我点击其中一行时，它会欺骗模态。就是不知道怎么显示。

Data Table from my angular project

Answer 1

要解决您的问题，您可以将 public 对象添加到您的视图模型中，并将该对象的类型添加到您正在迭代的集合中。

然后您可以将所选对象的值分配给视图模型中的对象，例如：

<tr class="rows" *ngFor="let item of ListOfTestResults; let i = index;" (click)="SelectedItem = item" data-toggle="modal" data-target="#exampleModal" [ngClass]="{'table-success': item.match, 'table-danger': !item.match}">

然后您可以在模态中访问 SelectedItem 的属性：

    <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            {{SelectedItem.testCaseTitle}}
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>

编辑：还将循环移动到 tr 元素:)

从数组列表中选择数组并以模式显示信息

Choose array from arraylist and display information in a modal

angular

angular5

angular-ngfor