如何在Angular组件类中访问*ngFor的filteredList变量并传递给父组件？

哎，这个问题我之前也碰到过——你在模板里用as filteredList声明的变量是模板上下文专属的局部变量，组件类根本拿不到它。不过别担心，有几个靠谱的解决办法：

方案1：把过滤逻辑移到组件类，手动调用管道 #

这是最推荐的方式，可控性拉满：

1. 先把你的FilterPipe注入到组件里（记得在组件的providers里加上它）：

import { Component, OnInit } from '@angular/core';
import { FilterPipe } from './path/to/filter.pipe';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  providers: [FilterPipe] // 必须加这个才能注入管道
})
export class YourComponent implements OnInit {
  list: any[] = []; // 你的原始数据列表
  filterText = 'filter text'; // 过滤关键词
  filteredList: any[] = []; // 过滤后的列表，组件类直接能拿到

  constructor(private filterPipe: FilterPipe) {}

  ngOnInit(): void {
    // 初始化时执行一次过滤
    this.refreshFilteredList();
  }

  // 封装过滤方法，方便在数据变化时调用
  refreshFilteredList(): void {
    this.filteredList = this.filterPipe.transform(this.list, this.filterText);
    // 要传给父组件？直接用@Output发射就行
    // this.onFilteredListChange.emit(this.filteredList);
  }
}

2. 然后修改模板，直接用组件类里的filteredList：

<ng-template *ngFor="let item of filteredList;">
  <!-- 你的列表内容 -->
</ng-template>

要传给父组件的话，加个@Output就行：

@Output() onFilteredListChange = new EventEmitter<any[]>();

每次调用refreshFilteredList()后emit这个值，父组件就能收到过滤后的列表了。

方案2：用模板引用变量+ViewChild捞上下文 #

如果你非得保留模板里的管道写法，也能通过模板引用变量拿到上下文里的filteredList：

1. 给ng-template加个引用名：

<ng-template #filteredListTemplate *ngFor="let item of list | filterPipe:'filter text' as filteredList;">
  <!-- 你的列表内容 -->
</ng-template>

2. 在组件类里用@ViewChild获取模板，再从上下文里取变量：

import { Component, ViewChild, AfterViewInit, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements AfterViewInit {
  @ViewChild('filteredListTemplate') filteredListTemplate!: TemplateRef<any>;
  filteredList: any[] = [];

  ngAfterViewInit(): void {
    // 从模板上下文里取出filteredList
    this.filteredList = this.filteredListTemplate.context.filteredList;
    // 注意：如果列表或过滤文本动态变化，你得监听变化重新获取，比如用ngOnChanges或者RxJS
  }
}

不过这个方案有点局限：必须等模板渲染完才能拿到值，动态更新的时候还要额外处理监听，不如方案1顺手。

方案3：直接在组件类写过滤逻辑（替代管道） #

如果你的过滤逻辑不复杂，干脆把管道扔了，直接在组件里写：

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  list: any[] = [];
  filterText = 'filter text';

  // 用getter实时计算过滤后的列表
  get filteredList(): any[] {
    // 这里写你的过滤逻辑，比如根据filterText筛选
    return this.list.filter(item => item.name?.includes(this.filterText));
  }
}

模板里直接用*ngFor="let item of filteredList"，组件类里随时能访问这个filteredList，传给父组件也很方便——父组件可以通过@ViewChild访问这个getter，或者你还是用@Output发射变化。

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