如何以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

试试这个。 我希望这会正常工作。

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

Answer 2

打字稿

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>