<mat-select>使用angular中的getElementById获取时没有value属性，如何获取值？</mat-select>

Question

我有这个元素具有动态id ，因为它在loop内：

<mat-select multiple class="dw-input" [value]="element.txn_type_id ? element.txn_type_id.split(',') : []" id="field-{{element.Name}}-txn_type_id">
 <mat-option *ngFor="let row of txnTypeList" value="{{row.id}}">{{row.name}}</mat-option>
</mat-select>

我正在像这样访问ts文件中的这个元素：

document.getElementById('field-' + permissionName + '-txn_type_id');

我正在获取元素，但没有value属性。 如何获取此元素的选定值。

我找不到使用模板参考来完成这项任务的任何方法。 由于动态 id 的变量，其中 id 的名称由字符串值和变量组成。

Answer 1

通过在模块中导入 FormsModule 并使用 [(ngModel)]，您可以初始化 select 控件并随时访问这些值，而无需任何 html 对控件的引用：

<div *ngFor="let element of elements; let i=index;">
  <mat-select multiple class="dw-input" [(ngModel)]="values[i].txn_type_ids" (selectionChange)="logValues()">
    <mat-option *ngFor="let row of txnTypeList" value="{{row.id}}">{{row.name}}</mat-option>
   </mat-select>
</div>

ts：

values: any[] = [];
elements = [
    {
      name: "name1",
      txn_type_id: "1,2"
    }, 
    {
      name: "name2",
      txn_type_id: "3"
    }
];

constructor() {
    this.elements.forEach(elem => {
      this.values.push({
        "txn_type_ids": elem.txn_type_id ? elem.txn_type_id.split(',') : []
      });
    });
}
logValues() {
    console.log(this.values); 
}

你也可以使用 ReactiveFormsModule 和 FormsArray 来访问表单控件：像这样。