web-dev-qa-db-fra.com

Angular 6 Matériau <sélection du tapis> valeur par défaut à jeux multiples à l'aide du contrôle de formulaire

J'utilise le contrôle de formulaire ici, c'est du code pour mon composant HTML

<mat-form-field>
  <mat-select placeholder="Toppings" [formControl]="toppings" multiple>
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping.value}}</mat-option>
  </mat-select>
</mat-form-field>

Et mon fichier ts est 

export class SelectMultipleExample {
   toppings = new FormControl();
  toppingList: any[] = [
      { id:1,value:"test 1"},
      { id:2,value:"test 2"},
      { id:3,value:"test 4"},
      { id:4,value:"test 5"},
      { id:5,value:"test 6"},
      { id:6,value:"test 7"}
    ];

  

  constructor(){
    this.bindData();
  }

  bindData(){
    const anotherList:any[]=[
      { id:1,value:"test 1"},
      { id:2,value:"test 2"}
      ]

      this.toppings.setValue(anotherList)
  }
}

Je veux définir la valeur par défaut pour mat select, toute aide pour y parvenir sera utile Je veux définir plusieurs valeurs par défaut.

angularangular-materialmaterial-designform-control
3
Abhishek

Le problème est dû au fait que vos options sont des objets. Pour que les sélections soient appliquées, les objets sélectionnés doivent être les mêmes que ceux utilisés pour les options. Révisez votre code comme suit:

export class SelectMultipleExample {
    toppings = new FormControl();
    toppingList: any[] = [
        { id:1,value:"test 1"},
        { id:2,value:"test 2"},
        { id:3,value:"test 4"},
        { id:4,value:"test 5"},
        { id:5,value:"test 6"},
        { id:6,value:"test 7"}
    ];

    constructor(){
        this.bindData();
    }

    bindData() {
        const anotherList: any[] = [
            this.toppingList[0],
            this.toppingList[1]
        ]

        this.toppings.setValue(anotherList)
    }
}
1
G. Tranter