Angular中*ngFor元素的自定义属性指令删除功能异常问题

问题根源 #

1. 指令实例获取错误：你在组件中通过单个实例引用的ToggleDirective只会对应*ngFor渲染的第一个元素，调用deleteIngredients()自然只会处理第一个元素，其他带active类的元素对应的指令实例根本没被触发。
2. Subject使用不当：调用complete()会直接终止Subject，导致后续点击无法再触发通知，这就是第二次点击无反应的原因。

修复步骤 #

1. 收集所有指令实例 #

修改购物列表组件，用@ViewChildren替代单个实例引用，获取所有被appToggleActiveClass装饰的元素指令实例：

import { Component, OnInit, ViewChildren, QueryList, OnDestroy } from '@angular/core';
import { ToggleActiveClassDirective } from './toggle-active-class.directive';
import { ShoppingListService } from './shopping-list.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-shopping-list',
  templateUrl: './shopping-list.component.html',
})
export class ShoppingListComponent implements OnInit, OnDestroy {
  ingredients = []; // 你的食材数据源
  @ViewChildren(ToggleActiveClassDirective) toggleDirectives!: QueryList<ToggleActiveClassDirective>;
  private deleteSub!: Subscription;

  constructor(private shoppingListService: ShoppingListService) {}

  ngOnInit() {
    this.deleteSub = this.shoppingListService.deleteShoppingIngredients.subscribe(() => {
      // 遍历所有指令实例，执行删除逻辑
      this.toggleDirectives.forEach(directive => {
        directive.deleteIngredients();
      });
    });
  }

  ngOnDestroy() {
    this.deleteSub.unsubscribe();
  }
}

2. 修正Subject触发方式 #

不要用complete()终止Subject，改用next()发射删除信号，这样可以重复触发删除操作：

// 购物列表编辑组件TS
deleteItems() {
    this.shoppingListService.deleteShoppingIngredients.next();
}

服务中的Subject可以调整为void类型（更贴合语义）：

// 购物列表服务TS
deleteShoppingIngredients = new Subject<void>();

3. 保留指令的删除逻辑 #

指令代码无需大改，每个实例负责处理自己对应的元素：

// Toggle Class指令TS
deleteIngredients() {
  if (this.el.nativeElement.classList.contains("active")) {
    this.renderer.setStyle(this.el.nativeElement, 'display', 'none');
  }
}

更优方案：从数据源删除（推荐） #

上面的方法只是隐藏DOM元素，刷新后会恢复。更符合Angular数据流理念的做法是直接从ingredients数组中删除选中项，让*ngFor自动更新DOM：

1. 给指令传入对应的食材数据，记录选中状态：

<!-- 购物列表模板 -->
<a
  class="list-group-item"
  appToggleActiveClass
  [ingredient]="ingredient"
  style="cursor: pointer"
  *ngFor="let ingredient of ingredients">
  {{ ingredient.name }} ({{ ingredient.amount }})
</a>

2. 指令中新增选中状态管理：

import { Directive, ElementRef, Renderer2, Input } from '@angular/core';

@Directive({
  selector: '[appToggleActiveClass]'
})
export class ToggleActiveClassDirective {
  @Input() ingredient!: any; // 替换为你的食材类型
  isActive = false;

  constructor(private el: ElementRef, private renderer: Renderer2) {
    // 绑定点击事件切换选中状态
    this.renderer.listen(this.el.nativeElement, 'click', () => {
      this.isActive = !this.isActive;
      this.el.nativeElement.classList.toggle('active', this.isActive);
    });
  }

  isSelected(): boolean {
    return this.isActive;
  }

  getIngredient() {
    return this.ingredient;
  }
}

3. 组件中过滤数据源：

// 购物列表组件TS中的subscribe回调
this.deleteSub = this.shoppingListService.deleteShoppingIngredients.subscribe(() => {
  const selectedIngredients = this.toggleDirectives
    .filter(d => d.isSelected())
    .map(d => d.getIngredient());
  
  // 从数据源中移除选中项
  this.ingredients = this.ingredients.filter(
    ing => !selectedIngredients.includes(ing)
  );
});

这样操作后，选中的食材会从数据源中彻底删除，DOM也会自动更新，无需手动操作样式。

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