如何使用 ngModel 存储和传递 Mat-Select 的值答案

【问题标题】：How to store and pass the value of Mat-Select using ngModel如何使用 ngModel 存储和传递 Mat-Select 的值
【发布时间】：2019-09-26 21:20:06
【问题描述】：

我有一个带有两个选项的 mat-select，即用户可以选择他是个人客户还是组织客户。现在我想将选择的值传递给服务类。我怎样才能做到这一点。我有一个表单，在用户选择一个选项后显示。填写表单后，用户单击保存并保存表单的所有信息。有了这些信息，我还希望能够保存 mat-select 选项。我该怎么做。

<!-- Dropdown to Select Type of Customer -->
<mat-form-field>
<mat-label>Select Customer Type</mat-label>
<mat-select (onSelectionChange)="getCustType($event)">
<mat-option *ngFor="let obj of custType" (click)="getCustType(obj)" 
[value]="obj.value"> {{ obj.viewValue }}</mat-option>
</mat-select>
</mat-form-field>

打字稿代码

 custType: any[] = [{ value: 'individual', viewValue: 'Individual Customer' }, { value: 'organizational', viewValue: 'Organizational Customer' }];

单击保存按钮时调用的 Typescript 函数

  saveIndCustData() {
const savedIndCustomer = {
  agreementId: this.agreementId,
  prefix: this.prefix,
  nameType: this.indCustNameType,
  firstName: this.firstName,
  middleNAme: this.middleName,
  lastName: this.lastName,
  gender: this.gender,
  dateOfBirth: this.parseDate(this.dateOfBirth.toString()),
  citizenship: this.citizenship
};
this.savedIndCustomer.emit(savedIndCustomer);
}

我想在上面的表单中传递 mat-select 的值，我该怎么做？

【问题讨论】：

只需将 ngModel 标签添加到 mat-select <mat-select (onSelectionChange)="getCustType($event)" [(ngModel)]="this.customerType">
请参阅：stackoverflow.com/questions/55350480/…，如果有帮助，请点赞回答

标签： html angular typescript angular-material

【解决方案1】：

将[(ngModel)]="this.selectedCustomerType"添加到mat-select标签，例如：

<mat-select [(ngModel)]="this.selectedCustomerType" (onSelectionChange)="getCustType($event)">

然后在你的 *.component.ts 文件中声明公共变量selectedCustomerType

【讨论】：