选择后如何获取下拉列表的值

Question

下面指定的是我的数据

Id , Name  , IsBillable
1    One       1
2    two       0
3.   three     0

这将是下面的下拉值我将分享 html 下拉代码

<mat-option *ngFor="let option of masterAppointmentTypes" [value]="option.id">
                    {{option.value}}
 </mat-option>

上面的 html 有效。我需要做的就是：在下面的代码中获取 IsBillable 数据

if(this.appointmentForm.get('id').value == this.appointmentForm.get('id').value && this.appointmentForm.get('IsBillable').value){
      this.openPaymentDialog(appointmentData, queryParams)
    }
    else{
      this.createAppointment(appointmentData, queryParams);
    }

在上面的代码中，我根据所选的下拉列表获取了 ID 值，但我没有根据所选的 id 获取 IsBillable 数据。下面的代码是我的 formBuilder。

const configControls = {
    
      'AppointmentTypeID': [appointmentObj.appointmentTypeID, Validators.required],
      'IsBillable' : [appointmentObj.isBillable,Validators.required],
    
      
    }
    this.appointmentForm = this.formBuilder.group(configControls);

Answer 1

你不需要两个 formControls。您可以执行以下操作：

const configControls = {

  'AppointmentType': [appointmentObj, Validators.required],

}
this.appointmentForm = this.formBuilder.group(configControls);

然后：

<mat-option *ngFor="let option of masterAppointmentTypes" [value]="option">
                    {{option.value}}
 </mat-option>

你应该有你想要的：

this.appointmentForm.get('AppointmentType').value.IsBillable

问题是，您使用 formControl 来获取 select 上的 Id，它做的是正确的，它没有做的是与其他表单控件同步以匹配 isBillable on select，这只是 isBillable 的初始值控制，而不是要更新的参考。这就是为什么你必须从组中获取（）表单控件，然后访问它的值以获得你想要的。

你可以阅读更多：https://angular.io/guide/reactive-forms

Answer 2

这有点棘手，请查看演示示例

https://stackblitz.com/edit/angular-mat-select-example-kyjxuu?file=src/app/app.component.html

HTML部分：

 <div style="padding: 20px">
  <h3>Value variable</h3>

  <mat-form-field>
    <mat-select #valueCountry>
      <mat-option *ngFor="let data of datas" [value]="data">
        {{ data.name }}
      </mat-option>
    </mat-select>
  </mat-form-field>
</div>

<div>
  Selected Id : {{ selectedData?.id }} <br />
  Selected Name : {{ selectedData?.name }} <br />Selected isBillable :
  {{ selectedData?.isBillable }}
</div>

组成部分：

@ViewChild('valueCountry') valueCountry: MatSelect;

  selectedData;

  constructor() {}

  ngOnInit() {
    this.valueCountry.selectionChange.subscribe(this.onChange.bind(this));
  }

  datas: any = [
    {
      id: 1,
      name: 'One',
      isBillable: true,
    },

    {
      id: 2,
      name: 'Two',
      isBillable: false,
    },

    {
      id: 3,
      name: 'Three',
      isBillable: false,
    },
  ];

  onChange(event) {
    this.selectedData = event.value;
  }