Как отобразить данные в mat-option angular?

Question

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

Пожалуйста, помогите мне найти ошибку. Ниже мой код.

Объект

{
   id: 12
   category_name: "category 1"
   author_id: 5
   customer_id: 12
}

Машинопись

this.form = this.fb.group({
   id: [null],
   category_name: [null, Validators.required],
   author_id: [this.auth.loggedInUserId.id],
   customer_id: [null]
})

editCategory(data) {
  this.form.patchValue(data);
  console.log(this.form.value);
}

HTML

<mat-form-field>
   <mat-label>Select Customer</mat-label>
   <mat-select [formControl]="form.controls.customer_id">
      <mat-option></mat-option>
      <mat-option *ngFor="let customer of customers" value="{{customer.id}}">{{customer.firstname}}
         {{customer.lastname}}
      </mat-option>
   </mat-select>
</mat-form-field>

Answer 1

Машинопись

this.form = this.fb.group({
   id: new FormControl(0),
   category_name: new FormControl('',Validators.required),
   author_id: new FormControl(this.auth.loggedInUserId.id),
   customer_id: new FormControl(0)
})

HTML

<mat-form-field>
    <mat-select placeholder="Select Customer" formControlName="customer_id" required>
    <mat-option *ngFor="let customer of customers" [value]="customer.id">{{customer.firstname}} {{customer.lastname}}</mat-option>
    </mat-select>
</mat-form-field>

Answer 2

Просто попробуйте это. Я надеюсь, что это будет работать нормально.

<mat-option *ngFor="let customer of customers" [value]="customer.id"> 
    {{customer.firstname}{{customer.lastname}}
 </mat-option>