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

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>

Typescript: I have:

  RpiIp = '';

and

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

The console prints an empty value (the value do not change). Where is the error? why the value is not changing?

Answer 1

mat-select will be containing the mat-option , so you have to use ngModel on mat-select.

Consider the below code:

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

Answer 2

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

Answer 3

Based on this answer the correct answer looks like this:

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

Thanks :D

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