Использование MatSelect с rx js из событий EventEvent не слышно? (SelectionChange) - PullRequest
Новая
       21

Использование MatSelect с rx js из событий EventEvent не слышно? (SelectionChange)

0 голосов
/ 20 апреля 2020

Я пытаюсь получить значение из MatSelect, используя rx js fromEvent. Я не могу понять, что произошло событие, хотя. У меня это работает с MatInput, потому что я думаю, что он наследует поведение по умолчанию от элемента ввода Html, но что-то не так с MatSelect.

Если я поменяю mat-select для выбора по умолчанию, (изменить ) событие подобрано и работает как задумано. (изменение) в какой-то момент было объявлено устаревшим в MatSelect и больше не работает.

Я попытался переместить идентификатор шаблона в параметр mat, чтобы посмотреть, может ли он получить событие оттуда, не повезло , попробовал: (изменить) (выбрать) (selectionChange) (valueChange) 


 @ViewChild('projectNameInput', {static: false, read: ElementRef}) projectNameInput: ElementRef;
 @ViewChild('pipelineSelect', {static: false, read: ElementRef}) pipelineSelect: ElementRef;
 @ViewChild('codeCoverageInput', {static: false, read: ElementRef}) codeCoverageInput: ElementRef;

 ngAfterViewInit() {
   // server-side search
   const projectObs$ = fromEvent(this.projectNameInput.nativeElement, 'keyup');
   const selectObs$ = fromEvent(this.pipelineSelect.nativeElement, 'onSelectionChange');
   const coverageObs$ = fromEvent(this.codeCoverageInput.nativeElement, 'keyup');

   const all$ = merge(projectObs$, selectObs$, coverageObs$)
     .pipe(
       debounceTime(300),
       distinctUntilChanged(),
       tap(() => {
         this.paginator.pageIndex = 0;
         this.loadSummariesPage();
       })
     )
     .subscribe();

   this.paginator.page
     .pipe(
       tap(() => this.loadSummariesPage())
     )
     .subscribe();
 }

------------------------------------

 <mat-form-field appearance="fill">
   <mat-label>types</mat-label>
   <mat-select name="type" [(ngModel)]="type">
     <mat-option #x *ngFor="let option of options" [value]="option.value">
       {{option.viewValue}}
     </mat-option>
   </mat-select>
 </mat-form-field>

1 Ответ

0 голосов
/ 20 апреля 2020

Если у вас есть Observable, вам нужно подписаться на него, если вы хотите получать потоковые данные.

В коде вашего компонента вам нужно что-то вроде: 

selectObs$.subscribe(selectedVal => console.log(selectedVal));

note : Запомните отписаться в событии компонента OnDestroy, чтобы предотвратить утечки памяти.


ОБНОВЛЕНИЕ

1 - В вашем компоненте вы должны связать matSelect, а не matOption. Затем вы можете прослушать излучатель selectionChange (например, Observable): 

 @ViewChild(MatSelect) select: MatSelect;

Без использования #x в шаблоне.


2 - Вы пытались изменить строку с: 

const selectObs$ = fromEvent(this.pipelineSelect.nativeElement, 'onSelectionChange');

на 

const selectObs$ = fromEvent(this.pipelineSelect.nativeElement, 'selectionChange');

Я никогда не работал с событием nativeElement, но у matSelect есть EvenEmitter selectionChange: EventEmitter<MatSelectChange>, поэтому он может несовпадение имен.


3 - используйте selectionChange emitter: 

<mat-select name="type" [(ngModel)]="type">
     <mat-option #x (selectionChange)="onValueSelected()" *ngFor="let option of options" [value]="option.value">
       {{option.viewValue}}
     </mat-option>
 </mat-select>
...