小编Anu*_*hra的帖子

我正在使用 Angular 9 mat-chips，我想知道如何停止在输入中添加新值，而只允许添加自动完成列表中的项目，即输入不在自动完成列表中的“abc”，并且按 Enter 键会在输入中添加“abc 作为芯片”，需要避免仅添加自动完成列表中的值。另外，我想知道如何停止在角垫片中添加重复项，即如果我已经添加了柠檬柠檬不应该添加到垫片列表中，并且也应该从自动完成列表中删除。

以下是代码：

芯片自动完成.component.ts

@Component({
  selector: 'chips-autocomplete-example',
  templateUrl: 'chips-autocomplete-example.html',
  styleUrls: ['chips-autocomplete-example.css'],
})

export class ChipsAutocompleteExample {
  visible = true;
  selectable = true;
  removable = true;
  separatorKeysCodes: number[] = [ENTER, COMMA];
  fruitCtrl = new FormControl();
  filteredFruits: Observable<string[]>;
  fruits: string[] = ['Lemon'];
  allFruits: string[] = ['Apple', 'Lemon', 'Lime', 'Orange', 'Strawberry'];

  @ViewChild('fruitInput') fruitInput: ElementRef<HTMLInputElement>;
  @ViewChild('auto') matAutocomplete: MatAutocomplete;

  constructor() {
    this.filteredFruits = this.fruitCtrl.valueChanges.pipe(
        startWith(null),
        map((fruit: string | null) => fruit ? this._filter(fruit) : this.allFruits.slice()));
  }

  add(event: MatChipInputEvent): void { …