时间戳

首页 > 解决方案 > 如何让 *ngFor 循环执行前 n-1 次，不希望显示最后一个索引的数据？

angular - 如何让 *ngFor 循环执行前 n-1 次，不希望显示最后一个索引的数据？

问题描述

HTML：

<div *ngIf="userdata; else blank;">                         
 <table>
  <thead>
   <tr>
    <th>Id</th>
    <th>Name</th>
    <th>Email</th>
    <th>Address</th>
    <th>Role</th>
    <th>Gender</th>
    <th>Actions</th>
   </tr>
  </thead>
  <tbody>
   <tr *ngFor="let data of userdata">                                          
    <td>{{data.Id}}</td>
    <td>{{data.Name}}</td>
    <td>{{data.Email}}</td>
    <td>{{data.Address}}</td>
    <td>{{data.Role}}</td>
    <td>{{data.Gender}}</td>
    <td>
     <button type="button" (click)="setUser(data)" class="btn btn-default btn-sm edit">
      <span class="glyphicon glyphicon-edit"/> Edit</button>                                              
     <button type="button" id="close" style="height: 30px;"
      (click)="deleteUser(data.Id)" class="btn btn-default btn-sm close" aria-label="Close">
      <span aria-hidden="true">&times;</span>
     </button>
    </td>                                           
   </tr>  
  </tbody>
 </table>
</div>
<ng-template #blank>No Records found...</ng-template>

这正是我在 userdata Array 中得到的：

[{
    "Id": "1",
    "Name": "sdfd",
    "Email": "fdg",
    "Address": "dfg",
    "Role": "Admin",
    "Gender": "male"
}, {
    "Id": "2",
    "Name": "dgfhh",
    "Email": "gdh",
    "Address": "hhh",
    "Role": "User",
    "Gender": "female"
}, {
    "Id": "3",
    "Name": "dfgf",
    "Email": "fgdh",
    "Address": "fghd",
    "Role": "Super-Admin",
    "Gender": "male"
}, "{\"blank-email\":\"Email cannot be blank\",\"blank-role\":\"You must play some role\",\"blank-gender\":\"You must specify your Gender\"}"]

所以在这里，我不希望从数组中执行它：

"{\"blank-email\":\"Email 不能为空\",\"blank-role\":\"你必须扮演一些角色\",\"blank-gender\":\"你必须指定您的性别\”}”

标签： angulartypescriptangular6

解决方案

您可以添加*ngIf和渲染不是最后的元素。

<tr *ngFor="let data of userdata; last as l">
   <ng-container *ngIf="!l">
     .....
   </ng-container>
</tr>

相当好的方法是对 viewModel 集合本身进行切片或切块，并保留ngFor该集合以在 UI 上显示它。

推荐阅读