Angular Material：垫子问题-select

Question

我正在使用 Angular Material 中的简单下拉菜单，目的是在选择时触发 event/function（本例为 api 调用）。我几乎尝试了所有方法，看了很多帖子，但仍然遗漏了一些东西

HTML:

<mat-form-field>
  <mat-label>Choose a camera</mat-label>
  <mat-select [(ngModel)]="selected"  (ngModelChange)="test()">
    <mat-option  *ngFor="let c of cameras" [value]="c.name">
      {{c.name}} 
    </mat-option>
  </mat-select>
</mat-form-field>

学生：

export class MoviesComponent implements OnInit {
  selected:string;

  test() { 
    console.log(this.selected);
  }
}

这很简单，也是众多方法之一，但没有任何效果！有什么想法吗？

Answer 1

你有2个选项。模型形式或反应形式。

选项一：模型形式

控制器

export class MoviesComponent implements OnInit {
  selected:string;
  
  test() {
    // API call here
    console.log(this.selected) 
  }
}

模板

<mat-form-field>
  <mat-label>Choose a camera</mat-label>
  <mat-select [(value)]="selected" (selectionChange)="test()">
  <!-- OR <mat-select [(ngModel)]="selected" (ngModelChange)="test()"> -->
    <mat-option *ngFor="let c of cameras" [value]="c.name">
      {{c.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

选项 2：反应式

控制器

export class MoviesComponent implements OnInit, OnDestroy {
  completed$ = new Subject<any>();
  selected: string;
  selectedControl = new FormControl(this.selected);
  
  ngOnInit() {
    this.selectedControl.valueChanges.pipe(
      takeUntil(this.completed$),
      switchMap(selected => {
        console.log(selected);
        // return API call here
      })
    ).subscribe(
      response => {
        // handle respone from API
      },
      error => {
        // handle error from API
      }
    );
  }

  ngOnDestroy() {
    this.completed$.next();
    this.completed$.complete();
  }
}

模板

<mat-form-field>
  <mat-label>Choose a camera</mat-label>
  <mat-select [formControl]="selectedControl">
    <mat-option *ngFor="let c of cameras" [value]="c.name">
      {{c.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

Angular Material：垫子问题-select

Angular Material: issue with mat-select

angular-material

dropdown

angular

选项一：模型形式

选项 2：反应式