如何以 mat-option 角度显示数据？答案

【问题标题】：How to display data in mat-option angular?如何以 mat-option 角度显示数据？
【发布时间】：2020-02-24 07:28:17
【问题描述】：

我有一个对象，我想在表单字段中显示它，单击按钮而不是选择选项后填充所有字段。出了什么问题。

请帮我找出错误。下面是我的代码。

对象

{
   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>

【问题讨论】：

customers 中的数据是什么？
@Mridul 客户包含与我在对象中提到的相同数据
我只是想在获取对象时填写我的字段
我希望客户包含数组对象？
是的，你是对的，但我只是展示了一个示例

标签： angular angular-material

【解决方案1】：

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

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

【讨论】：

【解决方案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>

【讨论】：