Angular 6中rxjs pipe在valueChanges上无法生效问题求助

这其实是Observable的冷流特性导致的，我来给你拆解清楚：

核心原因：冷Observable需要订阅才会激活 #

valueChanges是一个冷Observable——简单说就是它不会主动发射数据，只有当你调用.subscribe()之后，才会开始监听值的变化并推送数据流。

你用.pipe(tap(...))的时候，只是对数据流做了转换处理，但没有触发订阅——相当于你把水管接好了，但没开水龙头，自然没水流出来。而直接.subscribe()就相当于打开了水龙头，所以能看到控制台输出。

为什么Angular Material的示例不用显式subscribe？ #

你看的官网示例里：

this.filteredOptions = this.myControl.valueChanges
  .pipe(
    startWith(''),
    map(val => this.filter(val))
  );

这段代码的filteredOptions肯定是绑定到了模板的async管道上，比如：

<mat-option *ngFor="let option of filteredOptions | async" [value]="option">
  {{option}}
</mat-option>

async管道的作用就是自动帮你完成订阅和取消订阅，所以不需要你手动写.subscribe()，数据流也能正常流动。

你的解决方案 #

场景1：组件类内处理值变化（比如防抖后调用API） #

必须手动订阅，同时记得处理内存泄漏：

private destroy$ = new Subject<void>();

ngOnInit() {
  // 防抖300ms后处理逻辑的示例
  this.parentId.valueChanges.pipe(
    debounceTime(300),
    tap(() => console.log("Changed after debounce")),
    map(val => /* 对值做转换处理 */),
    takeUntil(this.destroy$) // 组件销毁时自动取消订阅
  ).subscribe(processedVal => {
    // 这里写你的业务逻辑，比如调用后端接口
  });
}

ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

场景2：处理结果要绑定到模板 #

就像官网示例那样，把转换后的Observable赋值给变量，用async管道处理：

// 组件类内
filteredParentIds$: Observable<any[]>;

ngOnInit() {
  this.filteredParentIds$ = this.parentId.valueChanges.pipe(
    startWith(''),
    debounceTime(200),
    map(val => this.filterParentIds(val)) // 自定义过滤逻辑
  );
}

// 模板内
<mat-option *ngFor="let id of filteredParentIds$ | async" [value]="id">
  {{id}}
</mat-option>

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