HI Я новичок в угловых и начал учиться.Q: У меня есть 2 компонента, один из которых имеет раскрывающийся список выбора из углового материала, а другой компонент имеет таблицу из углового материала. Поэтому, когда я делаю выбор из раскрывающегося списка, я хочу видеть это выбранное значение в компоненте таблицы.вот мой кодКаким-то образом, когда я делаю выбор в это время, служба вызывает метод и прослушивает, но после этого я ожидаю, что будет выполнен другой метод, который подпишется на прослушивание изменения.(Извините, если я не использовал правильную терминологию)
Ниже приводится структура компонентов.
navbarparent.component.html (These are 2 main components)
<div>
<app-mr-navbar> <!-- navbar.component.html --> </app-mr-navbar>
<app-player-overview> <!-- Tablecomponent.html --> </app-player-overview>
</div>
Компонент выбора является дочерним компонентом компонента.выпадает.
navbar.component.html
<div class="nav-header ">
<mat-grid-list cols="7">
<div>
<mat-grid-tile>
<app-eyefilter-navbar> <!-- selectbox.component.html --> </app-eyefilter-navbar>
</mat-grid-tile>
</div>
</mat-grid-list>
</div>
Это selectbox.component.html
<div class="eyefilter-dd inline-style eachSelect">
<mat-form-field>
<mat-select (selectionChange)="selectionChange($event.value)" placeholder="EyeFilter" [formControl]="eyefilters" multiple id="eyeFilter">
<mat-option *ngFor="let filter of filterList" [value]="filter" class="custom-font-size">{{filter}}</mat-option>
</mat-select>
</mat-form-field>
</div>
Это мой общий сервисный файл.
commonservice.ts
import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import { Observable} from 'rxjs/index';
import { BehaviorSubject, Subject} from 'rxjs/index';
@Injectable()
export class PlayerSkillsService {
private subject = new Subject<any>();
onChangeSelect(val: string) {
this.subject.next(val);
}
getSelectedDropdown(): Observable<any> {
return this.subject.asObservable();
}
}
Это компонент selectbox tsфайл.
selectbox.component.ts
import {PlayersService} from '../../services/playerskills.service';
@Component({
selector: 'app-eyefilter-navbar',
templateUrl: './eyefilter.component.html',
styleUrls: ['eyefilter.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class EyefilterComponent {
eyefilters = new FormControl();
filterList: string[] = ['Height', 'age', 'Show Power' , 'Finishing', 'Agility'];
constructor(private playerservice: PlayerSkillsService) {}
selectionChange(selectedVal): void { // This is executing
this.playerservice.onChangeSelect(selectedVal[0]);
}
}
Это файл таблицы ts.
import {Component, OnInit, ViewChild, ViewEncapsulation, Input, OnChanges, SimpleChanges} from '@angular/core';
import {Subscription} from 'rxjs/index';
import {PlayerSkillsService} from '../../services/playerskills.service';
export class PlayersDataComponent implements OnInit {
selectedDropdownVal: any;
subcription: Subscription;
constructor(private playerservice: PlayerSkillsService) {
this.subcription = this.playerservice.getSelectedDropdown().subscribe(selectedDropdownVal => this.selectedDropdownVal = selectedDropdownVal);
// expecting selectedDropdownVal value to be set when you change the selection from selectbox.
// THIS IS NOT WORKING.
}
ngOnInit() {
this.subcription = this.playerservice.getSelectedDropdown().subscribe(selectedDropdownVal => this.selectedDropdownVal = selectedDropdownVal);
}
}
Я не уверен, что мне здесь не хватает.Кто-нибудь может помочь?Дайте мне знать, если потребуется дополнительная информация.Спасибо