单击添加按钮时自动完成显示的角材料芯片列表

Question

我有一个带有自动完成功能的 Angular 材料芯片列表，但在示例中，当您将光标放在最后添加的芯片附近时，它会显示下拉列表，但我想在最后添加的芯片附近显示一个添加按钮，并且仅在用户之后显示自动完成已点击加号图标

像这样 - https://angular-zqijrv.stackblitz.io 但是在这里，当我删除所有芯片时，有一个奇怪的边框/轮廓我无法删除，并且只有在单击添加时才会显示输入框。

Answer 1

我认为你能做的是

您可以尝试在只读文本框中和何时显示筹码

 <input
      placeholder="New fruit..."
      #fruitInput
      [formControl]="fruitCtrl"
      [readonly]="readonl"   -- // add a readonly attribute
      [matAutocomplete]="auto"
      [matChipInputFor]="chipList"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      (matChipInputTokenEnd)="add($event)">

当用户选择芯片时

// html file event
    (optionSelected)="selectChip()" this event is fired when you select something from the dropdown.

  // ts file
    selectChip(){
    // your code 
  this.readonl = true;
    }

// 用户无法输入任何内容

您可以通过添加按钮将此 readonl 标志设置为 false 并在输入框中设置焦点，以便用户可以键入并查看下拉菜单。

---

第二种方法 有 2 个变量，一个是主数据变量，另一个是自动完成数据变量中的主数据副本。

 // ts file 
    masterData = [x,y,z]
    autoComplete = [...this.master]

// html file event
    (optionSelected)="selectChip()" this event is fired when you select something from the dropdown.

  // ts file
    selectChip(){
    // your code 
    this.autocomplete.length = 0; // make autocomplete length to 0 items and add a logic to move focus to some other element.
    }

    // when u click on add button
    addButton() {
    autoComplete = [...this.master]
    }
    // now the dropdown have items and will appear again.

---