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

Question

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数组中得到的:

[{
    "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 \":\"电子邮件不能为空白\",\"blank-role \":\"您必须扮演某个角色\",\"blank-gender \":\"您必须指定你的性别\"}"

Answer 1

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

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

相当不错的方法是在viewModel集合本身下切片或骰子,并保留ngFor该集合以在UI上显示它.