时间戳

首页 > 解决方案 > 单击添加按钮时带有自动完成显示的角材料芯片列表

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

问题描述

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

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

标签： angularangular-material

解决方案

我想你能做的是

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

 <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.

推荐阅读