角度材质自动完成，初始化过滤选项以查看焦点上的所有选项

Question

我有一个 Tour 数组，它由组件中的 API 用远程数据初始化。

tours: Tour[] = [];
filteredOptions: Observable<Tour[]>;

constructor(
  private api: APIService,
) { }

ngOnInit() {
  this.api.getTours().subscribe(
   data => { this.tours = data; this.filteredOptions = of(data); }
  );
}

这些旅行将显示在具有自动完成功能的垫子输入中

<mat-form-field class="long tour-sel">
   <input matInput type="text" [formControl]="myControl" [matAutocomplete]="tourList" placeholder="Select a tour"/>
</mat-form-field>
<mat-autocomplete #tourList="matAutocomplete">
   <mat-option *ngFor="let tour of filteredOptions | async" [value]="tour">{{tour.name}}</mat-option>
</mat-autocomplete>

在组件中，这是侦听更改和过滤选项的简单代码

this.filteredOptions = this.myControl.valueChanges.pipe(
  startWith(''),
  map(value => this._filterTour(value))
);
private _filterTour(value: string): Tour[] {
   const filterValue = value.toLowerCase();
   return this.tours.filter(option => option.name.toLowerCase().includes(filterValue));
}

如果我filteredOptions在上面显示的 subscribe 函数中初始化数组，当我单击输入时，我会在自动完成面板中看到所有选项，但是当我开始输入任何内容时，没有任何变化并且结果没有被过滤（过滤器函数没有被调用） . 如果我this.filteredOptions = of(data);在单击输入时删除我看不到任何选项，但过滤有效，当我删除我在输入中输入的内容时，所有选项都会被查看。我希望在不破坏过滤功能的情况下看到输入的第一个焦点上的所有选项。

Answer 1

可能的解决方案：

ngOnInit() {
  this.api.getTours().subscribe(
   data => { 
       this.tours = data;
       this.filteredOptions = this.myControl.valueChanges.pipe(
           startWith(''),
           map(value => this._filterTour(value))
       );
  });
}

当filteredOptionsthis.filteredOptions = of(data);在subscribe 函数中被初始化( ) 时，它会覆盖它之前的任何引用（对valueChanges.pipe 的引用），然后异步管道订阅这个新引用并且自动完成被设置为这个静态列表，因此，过滤不会工作。

但是，如果我们不在 subscribe 函数中初始化它，则 this.tours 在valueChanges.pipe(startWith(''))被调用时为空，因此列表一开始就是空的。

因此，解决方案可能是在填充 'this.tours' 之后（即在 subscribe 函数内）用 valueChanges.pipe() 初始化filteredOptions。