Angular中ngFor循环元素删除时的隐藏实现问题

我来帮你搞定这个问题！你已经在记录组件里设置了hide变量，现在只需要把这个变量和表格行的显示状态绑定起来就行，分两种常见情况给你说明：

情况1：表格行直接在父组件模板中循环 #

如果你的<tr>是直接在父组件里用*ngFor渲染的，没有单独的记录组件，那你可以把hide属性添加到每个数据项里，然后绑定到行的隐藏状态：

父组件模板代码 #

<table>
  <thead>
    <tr>
      <th> Id </th>
      <th> Name </th>
      <th> Surname </th>
      <th> Actions </th>
    </tr>
  </thead>
  <tbody>
    <!-- 用[hidden]绑定item的hide属性，或者用*ngIf="!item.hide"直接移除元素 -->
    <tr *ngFor="let item of items" [hidden]="item.hide">
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
      <td>{{ item.surname }}</td>
      <td>
        <button (click)="toggleHide(item)">删除</button>
      </td>
    </tr>
  </tbody>
</table>

父组件TS代码 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  // 初始化数据时给每个项加上hide默认值false
  items = [
    { id: 1, name: 'John', surname: 'Doe', hide: false },
    { id: 2, name: 'Jane', surname: 'Smith', hide: false }
  ];

  toggleHide(item: any) {
    // 点击删除时切换hide状态
    item.hide = true;
  }
}

情况2：表格行是独立的记录组件 #

如果每一行都是一个单独的记录组件（比如<app-record>），你只需要在组件的根元素（也就是<tr>）上绑定自身的hide变量即可：

记录组件TS代码 #

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-record',
  templateUrl: './record.component.html'
})
export class RecordComponent {
  @Input() item: any;
  // 你已经设置的默认false的hide变量
  hide = false;

  onDelete() {
    // 点击删除按钮时把hide设为true
    this.hide = true;
  }
}

记录组件模板代码 #

<!-- 把组件的hide变量绑定到tr的[hidden]属性 -->
<tr [hidden]="hide">
  <td>{{ item.id }}</td>
  <td>{{ item.name }}</td>
  <td>{{ item.surname }}</td>
  <td>
    <button (click)="onDelete()">删除</button>
  </td>
</tr>

父组件模板中使用记录组件 #

<table>
  <thead>
    <tr>
      <th> Id </th>
      <th> Name </th>
      <th> Surname </th>
      <th> Actions </th>
    </tr>
  </thead>
  <tbody>
    <app-record *ngFor="let item of items" [item]="item"></app-record>
  </tbody>
</table>

小提示：*ngIf vs [hidden] #

• *ngIf="!hide"：会直接把元素从DOM中移除，适合不需要保留元素的场景
• [hidden]="hide"：只是通过CSS的display: none隐藏元素，元素依然存在于DOM中，适合需要保留元素状态的场景

你可以根据自己的需求选择其中一种方式~

内容的提问来源于stack exchange，提问作者Olga