Angular中如何在TypeScript文件调用服务并处理Observable过滤？

一、为什么输出的是方法而非字符串数组？ #

你当前的代码readonly getStrings = this.stringSvc.getStrings$;只是把服务里的getStrings$方法本身赋值给了变量，并没有执行这个方法。要拿到返回的Observable<string[]>，必须调用方法（加括号）：

// 正确写法：调用方法获取Observable
readonly getStrings$ = this.stringSvc.getStrings$();

如果要获取实际的字符串数组，需要订阅这个Observable：

constructor(private stringSvc: StringService) {
  this.stringSvc.getStrings$().subscribe(strings => {
    console.log(strings); // 这里输出的就是返回的字符串数组
  });
}

二、如何基于输入前缀过滤字符串？ #

你直接用数组的filter方法是错误的，因为getStrings$()返回的是Observable<string[]>（数据流），不是普通数组。需要借助RxJS的操作符来处理流中的数据，下面分两种场景给出解决方案：

场景1：动态响应查询词变化（比如用户输入） #

如果查询词是动态变化的，用BehaviorSubject存储查询词，再合并数据流实现实时过滤：

import { BehaviorSubject, combineLatest, map } from 'rxjs';

// 定义存储查询词的Subject，默认空字符串
private querySubject = new BehaviorSubject<string>('');
// 对外暴露可观察的查询词流
query$ = this.querySubject.asObservable();

// 合并字符串数组流与查询词流，实现过滤
filteredStrings$ = combineLatest([
  this.stringSvc.getStrings$(),
  this.query$
]).pipe(
  map(([strings, query]) => {
    if (!query.trim()) return strings; // 无查询词时返回全部
    return strings.filter(item => item.toLowerCase().startsWith(query.toLowerCase()));
  })
);

// 更新查询词的方法，比如绑定到输入框的change事件
updateQuery(query: string) {
  this.querySubject.next(query);
}

在模板里可以用async管道自动订阅，无需手动管理订阅生命周期：

<ul>
  <li *ngFor="let str of filteredStrings$ | async">{{ str }}</li>
</ul>

场景2：单次过滤（固定查询词） #

如果只是单次根据固定查询词过滤，直接在订阅中处理数组即可：

filterStringsByPrefix(query: string) {
  this.stringSvc.getStrings$().subscribe(strings => {
    this.filteredStrings = strings.filter(item => 
      item.toLowerCase().startsWith(query.toLowerCase())
    );
  });
}

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