读取 <mat-option> angular 的值

Question

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;
  }

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

Answer 1

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

Answer 2

    <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>

Answer 3

mat-select 将包含 mat-option，因此您必须在 mat-[ 上使用 ngModel =21=].

考虑以下代码：

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

Answer 4

<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

Answer 5

基于的正确答案如下所示：

 <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

读取 <mat-option> angular 的值

Read the value of <mat-option> angular

html

typescript

angular2-template

angular