读取 <mat-option> 角度的值答案

【问题标题】：Read the value of <mat-option> angular读取 <mat-option> 角度的值
【发布时间】：2019-12-11 08:23:04
【问题描述】：

HTML：

  <mat-icon class="fab fa-raspberry-pi"></mat-icon>
  <mat-form-field>
    <mat-select placeholder="Rpi">
      <mat-option>Choose</mat-option>
      <mat-option *ngFor='let pi of myRpis' [(ngModel)]="RpiIp" ngDefaultControl [value]="pi.RPI_IP"
        (click)="getPins()">
        {{pi.LABEL}}
      </mat-option>
    </mat-select>
  </mat-form-field>

打字稿： 我有：

  RpiIp = '';

和

  getPins() {
    console.log(this.RpiIp);
    this.doneFetching = true;
  }

控制台打印一个空值（值不变）。错误在哪里？为什么值没有变化？

【问题讨论】：

标签： html angular typescript angular2-template

【解决方案1】：

基于this answer，正确答案如下所示：

 <mat-icon class="fab fa-raspberry-pi"></mat-icon>
      <mat-form-field>
        <mat-select placeholder="Rpi" [(value)]="RpiIp">
          <mat-option>Choose</mat-option>
          <mat-option *ngFor='let pi of myRpis' ngDefaultControl [value]="pi.RPI_IP" (click)="getPins()">
            {{pi.LABEL}}
          </mat-option>
        </mat-select>
      </mat-form-field>

谢谢:D

【讨论】：

【解决方案2】：

<mat-form-field>
  <mat-select placeholder="Rpi" [(value)]="RpiIp">
    <mat-option>Choose</mat-option>
    <mat-option *ngFor='let pi of myRpis'  ngDefaultControl [value]="pi.RPI_IP"
      (click)="getPins()">
      {{pi.LABEL}}
    </mat-option>
  </mat-select>
</mat-form-field>

https://stackblitz.com/angular/dybkbybngme?file=app%2Fselect-value-binding-example.ts

【讨论】：

它是 [(value)] 而不是 [(ngmodel)] 以便读取 [value] 字段

【解决方案3】：

mat-select 将包含 mat-option，因此您必须在 mat-select 上使用 ngModel。

考虑下面的代码：

<select . . . name="duration" [(ngModel)]="exercisePlan.duration"> 
<option *ngFor="let duration of durations" [value]="duration.value">{{duration.title}}</option>

【讨论】：

【解决方案4】：

    <mat-icon class="fab fa-raspberry-pi"></mat-icon>
    <mat-form-field>
       <mat-select placeholder="Rpi" >
         <mat-option>Choose</mat-option>
         <mat-option *ngFor='let pi of myRpis' ngDefaultControl [value]="pi.RPI_IP" (click)="getPins()">
          {{pi.LABEL}}
         </mat-option>
       </mat-select>
    </mat-form-field>

【讨论】：

【解决方案5】：

您需要将 ngModel 放在 mat-select 上，而不是 mat-option 上

【讨论】：