简体   繁体   English

Angular Material mat-select如何知道对象名称(selectionChange)

[英]Angular Material mat-select how to know object name (selectionChange)

I have two mat-select like this我有两个这样的垫子选择

<mat-form-field>
        <mat-select formControlName="Source" required placeholder="Source" (selectionChange)="change($event)"  [disabled]="!enabled">
          <mat-option *ngFor="let system of apiEntitySyncViewModel.Systems" value="{{system.Value}}">{{system.Text}}</mat-option>
        </mat-select>
        <mat-error>This field is mandatory</mat-error>
      </mat-form-field>

      <mat-form-field>
        <mat-select formControlName="Destination"  placeholder="Data Destination" (selectionChange)="change($event)" [disabled]="!enabled">
          <mat-option *ngFor="let system of apiEntitySyncViewModel.Systems" value="{{system.Value}}">{{system.Text}}</mat-option>
        </mat-select>
      </mat-form-field>

In my .ts I do some validation... If both have a different value from 0.. a function is fired.在我的 .ts 中,我做了一些验证......如果两者的值都不同于 0.. 一个函数被触发。 That is why I have the same funcion name on (selectionChange) event这就是为什么我在(selectionChange)事件上具有相同的功能名称

here is my function..这是我的功能..

change( ob:MatSelectChange) {
  var source=this.form.value["Source"];
  var destination=this.form.value["Destination"];
  if(source=="0" || destination=="0")
    return;
  this.getWorkflowItems();
}

What I would like to do, is to capture the Name of the object that was clicked.我想做的是捕获被点击对象的名称。

I can reach that adding and extra parameter (selectionChange)="change($event,'objName')" .我可以达到那个添加和额外的参数(selectionChange)="change($event,'objName')" But I would like to know if I can have it using $event parameter...但我想知道我是否可以使用 $event 参数...

Thanks谢谢

Instead of value="{{system.Value}}" pass the whole object:而不是value="{{system.Value}}"传递整个对象:

      <mat-form-field>
       <mat-select formControlName="Source" required placeholder="Source" 
                   (selectionChange)="change($event)" [disabled]="!enabled">
          <mat-option *ngFor="let system of apiEntitySyncViewModel.Systems"
                       value="{{system}}">
                {{system.Text}}
          </mat-option>
        </mat-select>
        <mat-error>This field is mandatory</mat-error>
      </mat-form-field>
      .
      .

And in the .ts file:在 .ts 文件中:

change(ob: MatSelectChange) {
  const source = this.form.value["Source"];
  console.log(source.Value)
  console.log(source.Text)
  .
  .
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM