Question

我想了解如何访问模板中所选项目的值。具体来说，我想知道如何在模板中访问IPMIDisplayTime和IPMIDisplayTime的选定值，并在此过程中使用它。

 import {ViewChild, ElementRef} from '@angular/core';

@Component({
  selector: 'app-select-dialog',
  template:`<h1 mat-dialog-title>
  {{ title | translate }}
</h1>
<div mat-dialog-content>
  <mat-select  #IPMIDisplayTime name="name" placeholder="optionPlaceHolder" [(ngModel)]="IPMIDisplayTimeSelection">
      <mat-option *ngFor="let option of options" [value]="options.value">
          {{ option.label }}
      </mat-option>
  </mat-select>  
</div>
<div mat-dialog-actions>
  &nbsp;
  <span fxFlex></span>
  <button class="mat-raised-button mat-accent" (click)="dialogRef.close(false)">{{"Close" | translate}}</button>
  <span fxFlex></span>
  <button class="mat-raised-button mat-accent" (click)="dialogRef.close(true)">{{"OK" | translate}}</button> 
</div>`,
  styleUrls : [ './select-dialog.component.scss' ]
})
export class SelectDialogComponent {

  public title: string;
  public options: Array<{ label: string, value: string }>;
  public optionPlaceHolder: string;
  public method: string;
  public params: string;
  @ViewChild('IPMIDisplayTime') IPMIDisplayTimeSelect: ElementRef;
  IPMIDisplayTimeSelection: string;


  constructor(public dialogRef: MatDialogRef < SelectDialogComponent >, protected translate: TranslateService ) {

  }





}

Answer 1

您在[(ngModel)]组件上使用<mat-select>双向绑定。这意味着IPMIDisplayTimeSelection将始终与当前<mat-select>值匹配。

您不需要@ViewChild装饰器和#IPMIDisplayTime模板变量。

someFn() {
  // this is the value of your select component
  console.log(this.IPMIDisplayTimeSelection);
}

angular2访问模板变量的值，

1 个答案: