Angular Material - md-select - 下拉列表中的选定项目答案

【问题标题】：Angular Material - md-select - selected item in dropdownAngular Material - md-select - 下拉列表中的选定项目
【发布时间】：2020-04-26 14:34:50
【问题描述】：

我有一个包含用户名列表的 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);     
            }); 
    }

【问题讨论】：

您是否尝试通过代码选择一个选项？还是在单击后获取选项的 ID？

标签： angular select angular-material

【解决方案1】：

您正在使用 ng-model，这是 AngularJS 语法。但是您不需要在这里使用 ngModel，因为您有一个响应式表单 (??)，您可以使用收到的值设置 formcontrol。所以当你收到你的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 中设置值。

【讨论】：

这就是我所缺少的。一旦我在组件上设置了它，它就可以很好地工作。 this.myForm.get('lead').setValue(this.plan.lead.id)
太棒了！很高兴听到！作为旁注，ngModel 完全没有必要（并且不鼓励）与反应式表单一起使用，在这种情况下，formcontrols 取代了它，并且应该用于设置值:) 您可以在此处拥有的表单控件上执行的其他功能：angular.io/docs/ts/latest/api/forms/index/…例如，如果您需要重置特定表单控件的值，这可能会很有用，因此请检查该页面 :) 此外，祝您度过愉快的一天/晚上/早上和愉快的编码！ :)

【解决方案2】：

首先，您使用的是响应式表单吗？

如果是这样，尽管您在 ng-model 中使用了不正确的语法（应该是 [(ngModel)]），但您不应该将它用于响应式表单。

仅使用formControlName 或[formControl]。

【讨论】：

我会补充一点，对于 ngModel 语法的一个很好的提醒是“盒子里的香蕉”，你可能不会忘记它：D