Блог

Я использовал функцию Comparewith в mat-select, но я не знаю, как изменить значение по умолчанию в mat-select. Он всегда устанавливает первое значение в массиве

 categoryList: Category[] = [
  { categoryId: 1, categoryName: 'Chemistry' },
  { categoryId: 2, categoryName: 'Math' },
];
  

В этом случае значением всегда является ‘Химия’. Как изменить значение по умолчанию на Math.

Это код HTML:

 <mat-select placeholder="Category" formControlName="categoryId" [compareWith]="compareFn">
    <mat-option *ngFor="let category of categoryList" [value]="category.categoryId">
       {{ category.categoryName }}
    </mat-option>
</mat-select>

compareFn(c1: any, c2: any): boolean {
   return c1 amp;amp; c2 ? c1.categoryId=== c2.categoryId: c1 === c2;
}

ngOnInit() {
   this.QuestionForm = this.formBuilder.group({
      categoryId: ['']
   });
   this.QuestionForm.get('categoryId').setValue(2);
}
  

Я надеюсь, что люди укажут мне решение. Спасибо

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

 <mat-select placeholder="Category" formControlName="categories">
    <mat-option *ngFor="let category of categoryList" [value]="category">
       {{ category.categoryName }}
    </mat-option>
</mat-select>

ngOnInit() {
   this.QuestionForm = this.formBuilder.group({
      categories: [null]
   });

   const defaultVal = this.categoryList.find(ctgry=> ctgry.id == 2);
   this.QuestionForm.get('categories').setValue(defaultVlue);
}

and no need for the compare function if you are using it for setting the category. Hope it will be helpful to you.
  

 this.QuestionForm.controls['categoryId'].setValue(2);
  

Измените приведенную выше строку. или

 this.QuestionForm = this.formBuilder.group({
  categoryId: [2]
});