Question

我有一个数据表，其中我显示的信息类似于＆＃34; id＆＃34;，＆＃34;原因＆＃34;，＆＃34; errorMessage＆＃34;和＆＃34; stackTrace＆＃34;。我运行一个角度for循环来显示这些信息，但我试图跟踪索引并在我点击我的数组中的数据时以模态显示信息。我如何解析索引到我的模态，以便我可以在那里显示信息？

这是我的数据表：

＆＃13;

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

＆＃13;

这是我尝试显示数组数据的模态。我的模态是使用bootstrap创建的。

＆＃13;

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

＆＃13;

以下是我的数据表的外观图。该表是可点击的，当我点击其中一行时，它会调整模态。我只是不知道如何显示信息。

Data Table from my angular project

Answer 1

您可以采取的措施是将一个公共对象添加到您的视图模型中，并将对象的类型放入您正在迭代的集合中。

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

<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元素：）

从arraylist中选择数组并以模态显示信息

1 个答案: