簡體   English   中英

Angular 6,如何獲取“ onSelectionChange” dom事件的目標元素?

[英]Angular 6, How to get the target element for an 'onSelectionChange' dom event?

使用角度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;
}

我是否想念一些東西,但是為什么不這樣提供:

 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引用的模板,然后將其提供給回調

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM