Как манипулировать множественным выбором мат за пределами выбора? - PullRequest
Новая
       44

Как манипулировать множественным выбором мат за пределами выбора?

0 голосов
/ 19 сентября 2018

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

 <mat-form-field style="width: 100%;">
    <mat-select placeholder="Contrats" formControlName="contrat" multiple>
      <mat-option *ngFor="let contrat of contrats$ | async" [value]="contrat.code" (click)="addContrat(contrat.code,contrat.label)">
        {{ contrat.label }}
      </mat-option>
    </mat-select>
  </mat-form-field>

, и этоэто функция, которая позволяет мне добавлять contrat 

public list: any[] = [];
addContrat(code: string, label: string) {
this.list.push({ code, label });
}
removeContract(i: number) {
 this.list.splice(i, 1);
}

, и это tempalte: 

<mat-chip-list [multiple]="true">
    <mat-chip style="width:100%" *ngFor="let x of list; let i=index" >
        {{x.code}} -- {{x.label}}
        <mat-icon matChipRemove aria-label="" (click)="removeContract(i)">clear</mat-icon>
    </mat-chip>

  </mat-chip-list>

, поэтому я хочу, когда я нажимаю на кнопку удаления contrat, выбор циновки будет обновлен

1 Ответ

0 голосов
/ 19 сентября 2018

Я думаю, вам может понадобиться украсить ваш чип с помощью свойства "removeable", например, так: 

<mat-chip *ngFor="let fruit of fruits" [selectable]="selectable"
             [removable]="removable" (removed)="remove(fruit)">
      {{fruit.name}}
      <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
    </mat-chip>

https://stackblitz.com/angular/ebkrnrqbnne?file=app%2Fchips-input-example.html https://material.angular.io/components/chips/overview#chip-input

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

 <mat-chip style="width:100%" *ngFor="let x of list; let i=index" (click)="removeContract(i)">
...