Angular *ngFor列表删除元素仅触发对应卡片离场动画求助

问题根因 #

你遇到的所有卡片都触发删除动画的问题，核心有两个原因：

1. *ngFor没有指定trackBy追踪函数：Angular默认会通过引用判断数组元素是否变化，只要数组更新就会销毁所有现有卡片DOM再重建，导致所有卡片都触发离场动画。
2. 当前删除逻辑仅调用了后端接口，没有同步更新本地的questionInfoList数组，动画本身也无法正确触发。

修复步骤 #

1. 修改模板代码，给*ngFor添加trackBy配置

<div class="container" *ngIf="questionInfoList">
    <mat-card *ngFor="let questionInfo of questionInfoList; trackBy: trackByQuestionId" [@removeAnimation]>
         <button mat-icon-button title="delete this question" (click)="deleteQuestion(questionInfo[0])">
                <mat-icon>delete</mat-icon>
         </button>
    </mat-card>
</div>

2. 修改组件代码，新增trackBy函数、同步更新本地数组

@Component({
  selector: 'app-admin-questions',
  templateUrl: './admin-questions.component.html',
  styleUrls: ['./admin-questions.component.css'],
  animations: [
    trigger('removeAnimation', [
      transition('* => void', [
        animate('1s', style({
          transform: 'translateX(100%)'
        }))
      ])
    ])
  ]
})
export class AdminQuestionsComponent implements OnInit {

  currentChannel!: string;
  questionInfoList!: Array<Array<string>>;

  constructor(private activeRouter: ActivatedRoute, private admin_service: AdminService, private snack: MatSnackBar,
    private service: EndpointsService, private bottomSheet: MatBottomSheet) {}

  // 新增：元素追踪函数，用问题ID作为唯一标识
  trackByQuestionId(index: number, questionInfo: Array<string>): string {
    return questionInfo[0];
  }

  deleteQuestion(questionId: string) {
    const numericQuestionId = Number(questionId);
    this.admin_service.deleteQuestion(numericQuestionId).subscribe({
      next: response => {
        this.snack.open(response, '', {
          duration: 3000
        });
        // 新增：从本地数组过滤掉已删除的问题
        this.questionInfoList = this.questionInfoList.filter(item => item[0] !== questionId);
      },
      error: err => console.log(err)
    })
  }
}

原理说明 #

配置trackBy后，Angular会根据返回的问题ID精准识别数组中发生变化的元素，只有被删除的元素会被标记为销毁状态，仅触发对应卡片的离场动画，其余元素不会被重新渲染。

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