Choose array from arraylist and display information in a modal

Question

I have a data table where i show information like a "id","reason", "errorMessage" and "stackTrace". I run an angular for-loop to display these information but i am trying to keep track of the index and display the information in an modal when i click on my data from my array. How can i parse the index to my modal so i can display the information there?

Here is my Data 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>

Here is the modal where i try to display data from my array. My Modal is created using 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>

Here is a picture of how my data table looks like. The Table is clickable and when i click on one of the rows it trickers the modal. I just dont know how do display the information.

Data Table from my angular project

Answer 1

What you could do to solve your problem is to add a public object to your view model with the type of the object in to collection you are iterating over.

You could then assign the value of the selected object to the object in your view model, like:

<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}">

You can then access the properties of SelectedItem in your modal:

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

Edit: Also move the loop to the tr element :)