0

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

这是我的数据表：

<!-- 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>

这是我尝试显示数组中的数据的模式。我的模态是使用引导程序创建的。

     <!-- 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>

这是我的数据表的样子的图片。表格是可点击的，当我点击其中一行时，它会欺骗模式。我只是不知道如何显示信息。

我的角度项目中的数据表

4

1 回答 1

2

你可以做些什么来解决你的问题是在你的视图模型中添加一个公共对象，该对象的类型与你正在迭代的集合中的对象类型相同。

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

<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 元素:)

于 2018-03-21T10:17:55.897 回答