如何修复 Angular 要求用户在选择第二个垫片之前单击单独元素的错误

Question

这里是 link 我将尝试描述的问题示例。在芯片自动完成示例中，单击文本框 select 一个新水果。

现在，在单击其他任何地方之前，像以前一样再次单击文本框。

这应该不会显示任何选项。这里的问题是用户必须开始键入新的 selection 或首先单击 window 中的另一个元素，然后 matchip 才会显示可供选择的选项。我想知道是否有办法解决这个问题。我希望用户能够从列表中选择一个 selection，然后像以前一样立即单击文本框并创建一个新的 selection。

Answer 1

因为你没有 post 你的代码并且你在 material 网站上提到了这个例子，我将把它作为他们在 stackblitz example 上的一个分支他们的网站。但这将允许您再次打开自动完成面板，尽管之前已将光标放在那里并选择了一个选项。

// Using MatAutocompleteTrigger will give you access to the API that will allow you to
// to open the panel or keep it open
...
@ViewChild(MatAutocompleteTrigger, {static: false}) trigger: MatAutocompleteTrigger;
...

  ngAfterViewInit() {
    fromEvent(this.fruitInput.nativeElement, 'click')
      .pipe(
        tap(() => {
          this.trigger.openPanel()
        })
      ).subscribe()
  }

Link 到完整的 stackblitz： https://stackblitz.com/edit/angular-sb38ig

Answer 2

我在外部 *ngFor 中使用 mat-chip-list 迭代 FormArray。

这是我所做的。效率很高:

<input 
    #validatorInput
    #operationTrigger="matAutocompleteTrigger"
    [formControl]="contactCtrl"
    [matAutocomplete]="auto"
    [matChipInputFor]="chipList"
    (blur)="contactCtrl.setValue(''); validatorInput.value='';"
    (click)="contactCtrl.setValue(''); validatorInput.value=''; operationTrigger.openPanel()">

诀窍是

始终清除您的 html 输入和您的（共享）formControl，每次 blur 和click 事件发生。
不要对输入 focus 事件执行此操作 'clear'。（因为当你删除最后一个筹码时，输入是auto-focus，你将得到著名的Expression has changed after it was checked。
当用户点击输入时调用operationTrigger.openPanel();

设置 contactCtrl.setValue(''); 可让您的自动完成面板在您调用 operationTrigger.openPanel()
设置 validatorInput.value=''; 只是一种将 formControl 与 html 输入正确同步的方法，以确保良好的 UX/UI 行为。
在我的 formArray 中，formControl 对于所有输入都是相同的，但这并不重要，因为用户在给定时间只能操作一个输入

如何修复 Angular 要求用户在选择第二个垫片之前单击单独元素的错误

How to fix Angular bug requiring user to click a separate element before choosing a second mat chip

html

mat

angular