防止 Mat-chip 在选择后添加行

Question

我试图阻止 mat-chip 模块在选择一个芯片后自动添加一行。最大筹码数为 1，因此我在用户从下拉列表中选择一个项目后禁用输入。但是，它仍然在其下方添加一行，就好像他们可以输入更多内容一样。我怎样才能防止这种情况发生？

  <mat-chip-list #chipList aria-label="Fruit selection"  >
    <mat-chip
      *ngFor="let item of selected; let i = index"
      [selectable]="!disabled"
      [removable]="!disabled"
      (removed)="remove(i)">
      {{item[filterProperty]}}
      <mat-icon matChipRemove>cancel</mat-icon>
    </mat-chip>
    <input
    [maxLength]="maxLength"
      [value]="optionBaseValue"
      [placeholder]="label" #chipsInput
      [disabled]="(selected.length === maxCount) || inEditMode === false"
      [matAutocomplete]="auto"
      [matChipInputFor]="chipList"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      [matChipInputAddOnBlur]="addOnBlur"
      (focus)="autoInputValue($event)"
      (focusout)="resetAutoInputValue($event)"
      (matChipInputTokenEnd)="add($event)">
  </mat-chip-list>
  <mat-autocomplete #auto="matAutocomplete" (optionSelected)="itemSelected($event)" (onBlur)="itemSelected($event)">
    <mat-option *ngFor="let item of filteredItems | async " [value]="item">
      <div > {{item[filterProperty]}}</div>
    </mat-option>
  </mat-autocomplete>

谢谢！！

Answer 1

你可以使用类似的东西：

<input [hidden]="selected.length === 1"

请注意，您可以随意更改条件。