使用 Array<Object> 的角度材质自动完成

Question

我有以下 Stackblitz： AutoComplete - StackBlitz

一旦用户选择一个选项，然后清除输入并开始输入，过滤就会停止工作。

用户如何选择一个选项并在只显示有效结果的地方开始输入？

Answer 1

它停止工作，因为您在 rxjs 流中遇到错误。

value 可以是 string 或 option 对象。您必须通过map 运算符正确映射它：

代替

.pipe(
  startWith(''),
  map(value => this._filter(value))
);

尝试以下方法：

.pipe(
  startWith(''),
  map(value => typeof value === 'string' ? value : value.address),
  map(address => address ? this._filter(address) : this.options.slice())
);

Forker Stackblitz

参见Angular material docs中的显示值自动完成示例

更新

OP 认为这个实现有问题：

为了方便起见，我再次分叉了您的按钮并添加了一个按钮。如果你 选择一个选项，单击继续，从邮政编码中退格“0”， 单击继续，将零添加回输入，单击继续。这 给你未定义的https://stackblitz.com/edit/angular-material-autocomplete-eg-4w15ki?file=app/autocomplete-filter-example.html

但是，如果您检查材料文档，它会按预期工作，因为 Angular 材料自动完成https://github.com/angular/components/issues/3334 中没有匹配选择或强制选择功能@

这意味着如果您正在键入并且键入的字符串与自动完成中的值完全匹配，那么 FormControl 的值将仍然是字符串而不是您所期望的对象。

为了强制它，您可以创建一个简单的指令，例如：

@Directive({
  selector: "[forceSelection]"
})
export class AutocompleteForceSelectionDirective implements AfterViewInit, OnDestroy {
  @Input() matAutocomplete: MatAutocomplete;

  @Input('forceSelection') key: string;

  private destroyed$ = new Subject();

  constructor(
    @Host() @Self() private autoCompleteTrigger: MatAutocompleteTrigger,
    private ngControl: NgControl
  ) {}

  ngAfterViewInit() {
    this.autoCompleteTrigger.panelClosingActions
      .pipe(
        filter(e => !e || !e.source),
        takeUntil(this.destroyed$)
      )
      .subscribe(e => {
        const selected = this.matAutocomplete.options
          .map(option => option.value)
          .find(option => (this.key ? option[this.key] : option) === this.ngControl.value);

        if (selected) {
          this.ngControl.control.setValue(selected);
        }
      });
  }

  ngOnDestroy() {
    this.destroyed$.next();
  }
}

并将其应用于您的输入

<input ... [matAutocomplete]="auto" forceSelection="address">

https://stackblitz.com/edit/angular-material-autocomplete-eg-lih2bo?file=app%2Fautocomplete-force-selection.directive.ts