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

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>

Answer 2

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

Answer 3

describe('Counter.vue', done => {
  it('increments count when button is clicked', () => {
    const wrapper = shallowMount(Counter);
    wrapper.find('button').trigger('click');
    wrapper.vm.$nextTick(() => {
      expect(wrapper.find('div span').text()).toMatch('1');
      done();
    });
  });
});

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

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

Answer 5

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

读取<mat-option> angular

5 个答案: