如何在角度 5 中绑定角度材料下拉列表的数据？

Posted 2023-03-13

【中文标题】如何在角度 5 中绑定角度材料下拉列表的数据？

【英文标题】：How to bind data on angular material dropdown in angular 5?

【发布时间】：2019-05-13 13:50:37

【问题描述】：

基本上我正在更新我有用户信息的用户个人资料。这将绑定在用户各自的字段上。

    this.editOfferprice= new FormGroup(
        xyz : new FormControl(xxxx,[]),
        xxx: new FormControl(xxxx,[Validators.required]),
        wwwID : new FormControl(xxxx,[Validators.required]));

在上面的代码中，我使用了 formgroup 和 formcontrol。

<mat-form-field fxFlex="49"> <mat-select placeholder="Select xxx" formControlName="xxx"> <mat-option *ngFor="let P of Pro" [value]="P.ID"> P.Name </mat-option> </mat-select> <mat-error *ngIf="editOffer.controls['xxx'].errors && editOfferprice.controls['xxx'].errors.required"> You must select NAme</mat-error> </mat-form-field>

我想知道如何在下拉列表中绑定数据？

【问题讨论】：

我认为这是您的解决方案 (***.com/questions/38655613/…)

【参考方案1】：

使用[ngValue]

*ngFor="let P of Pro" [ngValue]="P.ID">

【讨论】：

也应该与value一起使用，参见material.angular.io/components/select/examples

【参考方案2】：

尝试在这样的选择中使用ngModel进行绑定 -

<mat-form-field>
  <select matNativeControl [(ngModel)]="selectedOption" required>
    <option *ngFor="let P of Pro [value]="P.ID">P.Name</option>
  </select>
</mat-form-field>

或者如果你想使用 formControl 就这样做 -

[formControl]="yourControl"

由于 Angular 中的 this issue 绑定了 formControl 实例，而不是使用 formControlName。

Working Example