RxJS映射未运行函数

2023-05-27 admin

我不确定我在这里做错了什么，但在我的map函数中，我想调用_filter()。按照下面的方法，它工作得很好，但是即使item是falsy，我也想调用filter。

下面的示例基于材料的Chips Input表。

export type ChipItem = string | { label: string, [key: string]: any; };

export class ExampleComponent {
  selections = ['Apple', 'Pear', 'Orange'];
  filteredItems: Observable<ChipItem[]>;
  itemsCtrl = new FormControl();

  ngOnInit() {
    this.filteredItems = this.itemsCtrl.valueChanges.pipe(
      startWith(''),
      map((item: ChipItem) => item ? this._filter(item) : this.selections)
    );
  }

  private _filter(value?: ChipItem): ChipItem[] {
    console.log('here');

    // Apply filtering (this works).
    return this.selections.filter(i => /* Filter logic */)
  }
}

当我点击输入时，我想运行过滤器来过滤掉已经被选中的项目(过滤器中已经包含了该项目的代码)。过滤器适用于上面的，但不适用于下面的。

如果我将我的map改为下面的代码，那么_filter()永远不会被调用。

map((item: ChipItem) => this._filter(item))

html：

  <input 
    fxFlex="0 1" 
    #chipInput
    [formControl]="itemsCtrl" 
    [matAutocomplete]="auto" 
    (keyup.enter)="add($event)">

  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
    <mat-option *ngFor="let val of filteredItems | async" [value]="val">
      {{val.label || val}}
    </mat-option>
  </mat-autocomplete>

转载请注明出处:http://www.nali5.com/article/20230527/2061380.html