Question

我正在使用芯片自动完成组件，当我第一次触摸芯片自动完成组件时，它会显示下拉列表，如果我从下拉菜单中选择了任何选项，然后再次触摸芯片自动完成组件字段，直到我们键入内容，该字段才显示下拉菜单。我们不能更改此默认行为吗？

还有一个问题是，如果我在搜索字段中键入内容并按Enter，它将在屏幕上显示该数据。我只想显示列表中存在的数据。这是stackblitz链接。

Answer 1

为此使用blur()

  selected(event: MatAutocompleteSelectedEvent): void {
    this.fruits.push(event.option.viewValue);
    this.fruitInput.nativeElement.value = '';
    this.fruitCtrl.setValue(null);
    this.fruitInput.nativeElement.blur()
  }

Answer 2

尝试只放置可用的球员：

DEMO

  add(event: MatChipInputEvent): void {
    const input = event.input;
    const value = event.value;
    // Add our fruit
    if ((value || '').trim() && this.allFruits.indexOf(value) > -1) {
      this.fruits.push(value.trim());
    }

    // Reset the input value
    if (input) {
      input.value = '';
    }

    this.fruitCtrl.setValue(null);
  }

触摸时在“芯片自动完成”组件中显示下拉菜单

2 个答案: