Question

使用角度6，每当选择更改时，我都要获取相应元素的“ formControlName”。

HTML

    <mat-form-field *ngIf="dispatchAdviceChildForAdd._isEditMode" class="mat-form-field-fluid">
        <mat-select placeholder="Select Product" formControlName="newProductCode" required>
            <mat-option *ngFor="let pl of productList" value="{{pl.productCode}}" (onSelectionChange)="changeValues($event,pl)">{{pl.productCode}}</mat-option>
        </mat-select>
        <mat-hint align="start">
            <strong>Select</strong>
        </mat-hint>
    </mat-form-field>

TYPESCRIPT“更改值”

 changeValues(event, data: ProductListModel) {
      // here i need formControlName
 }

我尝试了以下方法，但没有帮助：

 changed(event) {
   console.log(event.target.id); 
 }

我也尝试过

changed(event) {
 const target = event.target || event.srcElement || event.currentTarget;
 const idAttr = target.attributes.id;
 const value = idAttr.nodeValue;
}

Answer 1

我错过了什么吗，但是为什么不这样提供呢？

changeValues(event, data: ProductListModel, controlName: string) {
      // here i need formControlName
 }

<mat-form-field *ngIf="dispatchAdviceChildForAdd._isEditMode" class="mat-form-field-fluid">
    <mat-select placeholder="Select Product" formControlName="newProductCode" required>
        <mat-option *ngFor="let pl of productList" value="{{pl.productCode}}" (onSelectionChange)="changeValues($event,pl,'newProductCode')">{{pl.productCode}}</mat-option>
    </mat-select>
    <mat-hint align="start">
        <strong>Select</strong>
    </mat-hint>
</mat-form-field>

要获取对组件本身的引用，可以使用：

changeValues(event, something, matComponent) {
  // not using material components so i dont know the class

}

<mat-form-field *ngIf="dispatchAdviceChildForAdd._isEditMode" class="mat-form-field-fluid">
    <mat-select #matSelect placeholder="Select Product" formControlName="newProductCode" required>
        <mat-option *ngFor="let pl of productList" value="{{pl.productCode}}" (onSelectionChange)="changeValues($event,pl, matSelect)">{{pl.productCode}}</mat-option>
    </mat-select>
    <mat-hint align="start">
        <strong>Select</strong>
    </mat-hint>
</mat-form-field>

在这里使用#matSelect引用模板，然后将其提供给回调

Angular 6，如何获取“ onSelectionChange” dom事件的目标元素？

1 个答案: