Как подписаться, используя асинхронный канал при изменении выбора - PullRequest
Новая
       22

Как подписаться, используя асинхронный канал при изменении выбора

0 голосов
/ 13 сентября 2018

У меня есть следующий код: 

export class EmployeeComponent {
employeeDataSource$:Observable<any>;
constructor(route:ActivatedRoute,private empService:EmployeeService){}

ngOnInit(){
 this.employeeDataSource$ = this.route.params.pipe(map(params => +params['id']),switchMap(id => 
   id ? this.getEmployeeDetails(id) : empty());
}

getEmployeeDetails(id:number,year?:string){ // If year is passed query should get records with the combination of id and year 
const empPersonalInfo$ = this.service.getEmpPersonalInfo(id);
const empContact$ = service.getContact(id);
const empAddress$ = service.getAddress(id);
const empValue$ = 
    forkJoin(empPersonalInfo$,empContact$,empAddress$)
    .pipe(map(([empPersonalInfo, empContact, empAddress]) => {
        return { empPersonalInfo, empContact, empAddress};
    }));
  }
  return empValue$;
 }  
}

Тогда в html у меня есть следующее 

<ng-container *ngIf="value$ | async as value">
  <h3 class="px-3 pt-3 pb-1">{{value.empPersonalInfo.Name}}</h3>
  // some other html comes here. //This works fine.
</ng-container>
<mat-form-field>
      <mat-select placeholder="Year" (selectionChange)="getEmployeeDetails(1,$event.value)">
        <mat-option [value]="All">All</mat-option>
        <mat-option *ngFor="let item of value.yearList" [value]="item.ElectionYearStr">
          {{item.ElectionYearStr}}
        </mat-option>
      </mat-select>
    </mat-form-field>

Это работает хорошо, пока Angular не подпишется на наблюдаемое, используя * ngIf с асинхронным каналом, нокак я должен достичь той же функциональности, когда значение в раскрывающемся списке изменяется.Я имею в виду, что я хочу сделать то же самое с приведенным ниже кодом. 

<mat-form-field>
      <mat-select placeholder="Year" (selectionChange)="getEmployeeDetails(1,$event.value) | async as value">
        <mat-option [value]="All">All</mat-option>
        <mat-option *ngFor="let item of value.yearList" [value]="item.ElectionYearStr">
          {{item.ElectionYearStr}}
        </mat-option>
      </mat-select>
    </mat-form-field>

Как я могу добиться * ngIf с асинхронным поведением всякий раз, когда изменяется значение в выпадающих изменениях, getEmployeeDetails () должен быть подписан.Это возможно.Пожалуйста, сообщите.

...