如何在angular 5中绑定angular material下拉列表中的数据

Question

基本上我正在更新有用户信息的用户配置文件。其将被绑定在用户各自的字段上。

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>

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

Answer 1

使用[ngValue]

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

Answer 2

尝试在select中使用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中的此问题，请绑定formControl实例，而不是使用formControlName。

工作示例