web-dev-qa-db-ja.com

material-angular-selectでコールバックを作成するにはどうすればよいですか？

驚いたことに、onselectコールバックが見つからなかったので、 material-angular-select でコールバックを作成するにはどうすればよいですか？

これは私の試みです

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 :(
    });
  }
}
angularangular-materialobservable
14
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>
11
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
            }
        );
    }
}
7
masterfloda