Angular Material 自动完成，初始化过滤选项以查看焦点上的所有选项

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 数组，如上面所示，当我单击输入时，我会在自动完成面板中看到所有选项，但当我开始输入时，结果没有任何变化没有被过滤(过滤函数没有被调用)。如果我删除 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))
       );
  });
}

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

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

因此，解决方案可能是在填充“this.tours”后(即在订阅函数内)使用 valueChanges.pipe() 初始化filteredOptions。