Angular Material - md-select - 在下拉列表中选择的项目

Question

我有一个带有用户名列表的 md-select 下拉列表。 我希望选择lead.id。 我怎样才能做到这一点？

  <md-select formControlName="lead" ng-model="plan.lead.id" id="lead" style="min-width: 200px;">
                    <md-option *ngFor="let lead of users" [value]="lead.id">
                        {{lead.displayName}}
                    </md-option>
                </md-select>

getLead() {
        this.service.getLead(this.id)
            .subscribe(res => {
                this.plan = res;
                console.log("lead: " + this.plan.lead);     
            }); 
    }

Answer 1

您正在使用ng-model ，这是 AngularJS 语法。 但是您不需要在这里使用 ngModel，因为您有一个反应式表单 (??)，并且您可以使用您收到的值设置表单控件。 因此，当您收到您的plan ，您可以设置该值：

this.myForm.get('lead').setValue(this.plan.lead.id)

您的模板：

<md-select formControlName="lead" id="lead" style="min-width: 200px;">
  <md-option *ngFor="let lead of users" [value]="lead.id">
      {{lead.displayName}}
 </md-option>
</md-select>

等待几秒钟， Plunker 中的值将被设置。

Answer 2

首先，您使用的是反应式形式吗？

如果是这样，尽管您在ng-model使用了不正确的语法（它应该是[(ngModel)] ），但您不应该将它与反应式形式一起使用。

仅使用formControlName或[formControl] 。