Как установить значение в angular mat-select при загрузке компонента?

Question

Я использовал угловой материал (" @ angular / material": "7.1.0 "), а затем я использовал контроль формы вместо модели ng, теперь проблема в том, что я не могуустановить значение при загрузке компонента.Мне нужно установить первое значение в поле mat-select из списка, я пытался, но я не могу этого сделать.

Я создал код на stackblitz, вот ссылка: https://stackblitz.com/edit/angular-zt1a9f

Пожалуйста, помогите мне в этом.

Answer 1

Тилагабахан, если [значение] - это животные* Видите, что последнее - это создание группы форм

Answer 2

Поскольку вы присваиваете целому animal объекту значение mat-option, то в этом случае
вам необходимо использовать двустороннюю привязку данных для предоставления выбранное значение параметра.

Используйте двухстороннюю привязку данных как [(ngModel)]="selectedValue"
вместо [(value)]="selectedValue" в коде приложения, и эта переменная selectedValue будет иметь тип объект животного, который вы присваиваете mat-option как

<mat-option *ngFor="let animal of animals" [value]="animal">
      {{animal.name}}
</mat-option>`

А теперь назначьте эту переменную в ngOnint() как

ngOnInit() {
  this.selectedValue =  this.animals[0]; // selecting first aninmal object as default value
}

Демонстрация Stackblitz - установка значения выбора мата при загрузке компонента

Answer 3

Используйте compareWith, чтобы выбрать значение по умолчанию, сравнивая имя внутри функции сравнения. Также обратите внимание, что я изменил привязку value к [(value)] ="animal". И убрал selectedValue. Вы выбираете значение по умолчанию, назначая его в formControl, смотрите ниже изменения в компоненте.

<form [formGroup]="myGroup">
<mat-form-field>
  <mat-select placeholder="Favorite animal" [compareWith]="compareThem" formControlName="animalControl" required >
    <mat-option>--</mat-option>
    <mat-option *ngFor="let animal of animals" [(value)] ="animal"  >
      {{animal.name}}
    </mat-option>
  </mat-select>
</mat-form-field>
</form>

В вашем компоненте добавьте:

export class AppComponent  {

  animals = [
    {name: 'Dog', sound: 'Woof!'},
    {name: 'Cat', sound: 'Meow!'},
    {name: 'Cow', sound: 'Moo!'},
    {name: 'Fox', sound: 'Wa-pa-pa-pa-pa-pa-pow!'},
  ];  

  myGroup = new FormGroup({
      animalControl: new FormControl(this.animals[1], [Validators.required]) //I'm assigining Cat by using this.animals[1], you can put any value you like as default.
  });


  compareThem(o1, o2): boolean{
    console.log('compare with');
    return o1.name === o2.name;
  }
}