问题如何在material-angular-select上创建回调？

令人惊讶的是我找不到onselect回调，那么如何创建回调呢材料-角度选？

这是我的尝试

import { Component, Input, Output, OnInit, OnChanges, SimpleChanges, ChangeDetectionStrategy, EventEmitter } from '@angular/core';    
import { BehaviorSubject } from 'rxjs/BehaviorSubject';    
import { FormControl } from '@angular/forms';
import { MatSelectModule } from '@angular/material/select';

@Component({
  selector: 'app-search-navigator',
  template: `
    <mat-form-field>
      <mat-select [(value)]="selected" [formControl]="pc" panelClass="example-panel-{{pc.value}}">
        <mat-option *ngFor="let panelColor of panelColors" [value]="panelColor.value">
          {{ panelColor.viewValue }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  `,
  changeDetection: ChangeDetectionStrategy.Default
})
export class SearchNavigatorComponent implements OnInit {
  private selected ;
  private selectedObs$;
  private pc = new FormControl('red');
  private panelColors = [
    {value: 'red', viewValue: 'red'},
    {value: 'blue', viewValue: 'blue'},
    {value: 'green', viewValue: 'green'}
  ];
  constructor() {}

  ngOnInit() {
    this.selectedObs$ = new BehaviorSubject<any>(this.selected);
    this.selectedObs$.subscribe((aselected) => {
      console.log(aselected);//Nothing happens on select :(
    });
  }
}

8972

2017-11-30 08:07

起源

<mat-select placeholder="Favorite food" [(ngModel)]="selectVal" (ngModelChange)="changeSelect()"> - Sachila Ranawaka

这工作，ngModelChange工作 - ishandutta2007

答案:

材质选择会在每次更改时发出MatSelectChange事件。它作为selectionChange输出了。

 <mat-form-field>
      <mat-select [(value)]="selected" [formControl]="pc" panelClass="example-panel-{{pc.value}}" (selectionChange)="doSomething($event)">
        <mat-option *ngFor="let panelColor of panelColors" [value]="panelColor.value">
          {{ panelColor.viewValue }}
        </mat-option>
      </mat-select>
    </mat-form-field>

2017-11-30 08:16

不行不通。 (selectionChange) 似乎不存在 mat-select 。你能指点我正在谈论的文件吗？ - ishandutta2007

它应该与最新版本的材料一起使用。如果您使用版本<5.0.0尝试（更改）而不是（selectionChange），因为它已重命名。看到： material.angular.io/components/select/api 和 github.com/angular/material2/blob/master/CHANGELOG.md - Mateusz Witkowski

ngModelChange为我工作。 - ishandutta2007

我正在使用5.x.不确定为什么selectionChange不起作用。我复制粘贴您的确切代码。 - ishandutta2007

好。你还记得在你的组件中声明doSomething函数吗？ - Mateusz Witkowski

我遇到了类似的问题，仍然需要通过服务在其他组件中订阅该值。此外，在我的情况下，选择不是表单的一部分。所以我想我会放弃我的角度/材料5的解决方案，万一其他人偶然发现：

my.service.ts

@Injectable()
export class MyService {
    myValue: BehaviorSubject<number> = new BehaviorSubject(1);
}

该服务被定义为全球提供商 app.modules.ts

some.component.ts 有 <mat-select>

@Component({
    templateUrl: './some.component.html',
})
export class SomeComponent {
    constructor(private __myService: MyService) {
    }

    selectValue = this.__myService.myValue.value;

    changeValue($event: EventEmitter<MatSelectChange>) {
        this.__myService.myValue.next($event.value);
    }
}

some.component.html

<mat-select
    [value]="selectValue"
    (selectionChange)="changeValue($event)"
    placeholder="Select a value"
>
    <mat-option [value]="1">Option 1</mat-option>
    <mat-option [value]="2">Option 2</mat-option>
    <mat-option [value]="3">Option 3</mat-option>
</mat-select>

other.component.html 订阅价值变化

export class OtherComponent implements OnInit {
    constructor(private __myService: MyService) {
    }

    ngOnInit() {
        this.__myService.myValue.subscribe(
            next => {
                // do something
            }
        );
    }
}

2018-02-16 17:42

（selectionChange）工作正常 - Bharathiraja

问题 如何在material-angular-select上创建回调？

答案:

热门问题

问题如何在material-angular-select上创建回调？