Anehnya saya tidak dapat menemukan panggilan balik pilihan, Jadi bagaimana cara membuat panggilan balik di material-angular-select ?

Ini adalah usaha saya

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 :(
    });
  }
}
17
ishandutta2007 30 November 2017, 11:07
2
<mat-select placeholder="Favorite food" [(ngModel)]="selectVal" (ngModelChange)="changeSelect()">
 – 
Sachila Ranawaka
30 November 2017, 11:15
1
Ini berhasil, ngModelChange berfungsi
 – 
ishandutta2007
30 November 2017, 13:29

2 jawaban

Pemilihan material memancarkan event MatSelectChange pada setiap perubahan. Ini dikeluarkan sebagai 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>
11
Mateusz Witkowski 30 November 2017, 11:16
Tidak tidak bekerja. (selectionChange) sepertinya tidak ada di mat-select . Bisakah Anda mengarahkan saya ke dokumentasi yang Anda bicarakan?
 – 
ishandutta2007
30 November 2017, 11:21
Ini harus bekerja dengan materi versi terbaru. Jika Anda menggunakan versi <5.0.0 coba (ubah) alih-alih (selectionChange) karena telah diganti namanya. Lihat: material.angular.io/components/select/api dan github.com/angular/material2/blob/master/CHANGELOG.md
 – 
Mateusz Witkowski
30 November 2017, 11:25
Saya menggunakan 5.x. tidak yakin mengapa selectionChange tidak berfungsi. Saya menyalin dan menempelkan kode persis Anda.
 – 
ishandutta2007
30 November 2017, 13:32
OKE. Dan apakah Anda ingat untuk mendeklarasikan fungsi doSomething di komponen Anda?
 – 
Mateusz Witkowski
30 November 2017, 15:49
1
Dengan angular 5 saya harus mengubah EventEmmiter menjadi MatSelectChange agar berfungsi.
 – 
Walfrat
18 Mei 2018, 10:01

Saya memiliki masalah yang sama dan masih membutuhkan nilai untuk berlangganan di komponen lain melalui Layanan. Juga, dalam kasus saya pilih bukan bagian dari formulir. Jadi saya pikir saya akan menjatuhkan solusi saya untuk angular/material 5, kalau-kalau ada orang lain yang menemukan ini:

layanan saya.ts

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

Layanan ini didefinisikan sebagai penyedia global di app.modules.ts

some.component.ts memiliki <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 berlangganan perubahan nilai

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

    ngOnInit() {
        this.__myService.myValue.subscribe(
            next => {
                // do something
            }
        );
    }
}
7
masterfloda 16 Februari 2018, 20:42