angular - 如何设置mat-chip输入的最大芯片数？

Question

我想让用户在自动完成的 mat-chip 中只输入一个芯片。 我知道 md-chips 有 md-max-chips 来设置最大芯片数。 但是我使用的是 mat-chip，如何设置这样的最大芯片数？

<mat-chip-list maxLength="1">
  :
  :
</mat-chip-list>

Answer 1

据我所知，您不能直接在MatChipList 上设置它。您可以做的是，为用户尝试添加的每个筹码自行检查所选筹码的数量，然后根据已添加的筹码数量决定是否添加筹码。

Check out this stackblitz taken from the official documentation and modified to solve your problem.

所有我改变的是这个(当通过自动完成添加筹码时):

selected(event: MatAutocompleteSelectedEvent): void {
  if (this.fruits.length < 1) { // <-- THIS
    this.fruits.push(event.option.viewValue);
    this.fruitInput.nativeElement.value = '';
    this.fruitCtrl.setValue(null);
  } 
}

还有这个(通过打字添加筹码时):

add(event: MatChipInputEvent): void {
  // Add fruit only when MatAutocomplete is not open
  // To make sure this does not conflict with OptionSelected Event
  if (!this.matAutocomplete.isOpen) {
    const input = event.input;
    const value = event.value;

    // Add our fruit
    if ((value || '').trim() && this.fruits.length < 1) { // <-- THIS
      this.fruits.push(value.trim());
    }

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

    this.fruitCtrl.setValue(null);
  }
}

基本上，在添加任何新筹码之前，您会检查已选择的筹码数量。相应地编辑您的代码，上面的示例应该涵盖这两种情况(自动完成和键入)。