Question

我试图使用它ouside ngFor指令来计数表中的行数，如以下代码所示

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">IP</th>
      <th scope="col">Session_ID</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor='let obj of methodResponse; let theIndex = index;'>
      <th scope="row"> {{theIndex + 1}}</th>
      <td>{{obj.name}}</td>
      <td>{{obj.sourceIp}}</td>
      <td>{{obj.sessionId}}</td>
    </tr>
  <!-- I want to use the final value of theIndex value here -->
  </tbody>
</table>

我如何计算每一行并在ngFor之外使用它，我试图在ngFor内调用一个函数，但对我没有用，有帮助吗？

Answer 1

您可以使用数组的length属性来显示表中有多少个元素。

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Name</th>
      <th scope="col">IP</th>
      <th scope="col">Session_ID</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor='let obj of methodResponse; let theIndex = index;'>
      <td scope="row"> {{theIndex + 1}}</td>
      <td>{{obj.name}}</td>
      <td>{{obj.sourceIp}}</td>
      <td>{{obj.sessionId}}</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td>{{methodResponse.length}}</td>
    </tr>
  </tfoot>
</table>

Answer 2

// theIndex的最终值您可以使用以下代码实现

上一个值：{{methodResponse.length-1}}

在ngfor外使用计数器

2 个答案: