角度8的材料芯片。只允许用户添加1个芯片

Question

I'm trying to make so users can only choose one chip in my angular material chip list.

当我开始在输入中键入时，进程会转到后端，并根据键入的内容检索选项列表

如文档所示，我尝试使用multiple = false，但我仍然能够选择多个结果。

<mat-form-field class="double-field" appearance="outline">
            <mat-label>{{translations.companyLbl}}</mat-label>
            <mat-chip-list #companyChip [multiple]="multiple">
              <mat-chip *ngFor="let company of companiesLoaded" [selectable]="selectable" [removable]="removable"
                (removed)="removeCompanyChip(company)">
                {{company.Name}}
                <mat-icon matChipRemove *ngIf="companyLocked">cancel</mat-icon>
              </mat-chip>
              <input placeholder="Choose a company" #companyInput [formControl]="companyControl" formControlName="Company"
                [matAutocomplete]="companyAutocomplete" [matChipInputFor]="companyChip"
                [matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="addOnBlur" />
            </mat-chip-list>
            <mat-autocomplete #companyAutocomplete="matAutocomplete" (optionSelected)="selectedCompanyChip($event)">
              <mat-option *ngFor="let company of filteredCompanies | async" [value]="company">
                {{ company.Name }}
              </mat-option>
            </mat-autocomplete>
          </mat-form-field>

用户只能选择一个结果。

Answer 1

首先，将这个添加到您的芯片输入标签中。

<input (matChipInputTokenEnd)="add($event)">

在add函数中写入逻辑

add(event: MatChipInputEvent): void {
    const input = event.input;
    const value = event.value;

    // Add your company if array's length is 0
    if (this.companiesLoaded.length === 0) {
      this.companiesLoaded.push(value.trim());

    }

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