у меня есть раскрывающийся список, где у меня есть значения, мне нужно выбрать значение только один раз, в следующий раз, когда значение будет отключено,

Question

У меня есть сценарий, в котором мой раскрывающийся список имеет два значения или две роли, если я выбрал одну роль, он не может выбрать одно и то же значение еще раз. Как мы можем достичь этого. Кто-нибудь может помочь мне найти решение для это.

 public roleList: string[] = ["QA", "Technician"];
 public separatorKeysCodes: number[] = [ENTER, COMMA];
 public selectedRoles: string[] = [];
 public currentSelected: String;
 public selectable: boolean = true;
  public removable: boolean = true;
  public addOnBlur: boolean = false;[![enter image description here][1]][1]

 /** add CHIP's **/
  add(event: MatChipInputEvent): void {
    if (!this.matAutocomplete.isOpen) {
      const input = event.input;
      const value = event.value;
      if (input) {
        input.value = '';
      }
    }
  }

  /** remove CHIP's **/
  remove(role): void {
    const index = this.selectedRoles.indexOf(role);
    if (index > 0) {
      this.selectedRoles.splice(index, 1);
    }
    if (index <=0) {
      this.selectedRoles.splice(index, 1);
      this.userDiagForm.get('roles').patchValue(null)
    }
  }

  selected(event: MatAutocompleteSelectedEvent): void {
    this.selectedRoles.push(event.option.viewValue);
    this.roleInput.nativeElement.value = '';
  }

HTML КОД

  <div fxLayout="row">
          <mat-form-field class="example-chip-list" fxFlex>
            <mat-chip-list #chipList fxFlex>
              <mat-chip *ngFor="let role of selectedRoles" [selectable]="selectable" [removable]="removable"
                (removed)="remove(role)">
                {{role}}
                <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
              </mat-chip>
              <input class="chips" placeholder="New role..." #roleInput formControlName="roles" [matAutocomplete]="auto"
                [matChipInputFor]="chipList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                [matChipInputAddOnBlur]="addOnBlur" (matChipInputTokenEnd)="add($event)" fxFlex>
            </mat-chip-list>
            <mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)">
              <mat-option *ngFor="let role of roleList" [value]="role">
                {{role}}
              </mat-option>
            </mat-autocomplete>
          </mat-form-field>
        </div>

Answer 1

Я нашел решение для этого, спасибо, я добавил одно, если условие, текущее выбранное значение существует в массиве выбранных ролей, сделайте входное значение пустым;

 selected(event: MatAutocompleteSelectedEvent): void {
    this.currentSelected = event.option.viewValue;
    if(!this.selectedRoles.includes(this.currentSelected)){
       this.selectedRoles.push(event.option.viewValue);
    }
    this.roleInput.nativeElement.value = '';
  }
````