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

Yes you are right, thanks. I just tried to run it in <tbody> for a test where i put the modal it self inside the loop but i was only able to display the values for index 0 not the rest of the indexes. But i changed it back to <tr> — Kristofer Mar Einarsson
– Kristofer Mar Einarsson, Commented Mar 21, 2018 at 10:04

Mark Reimer · Accepted Answer · 2018-03-21 10:55:02Z

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

Collectives™ on Stack Overflow

Choose array from arraylist and display information in a modal

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related