Question

我有以下代码：

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（）。这可能吗。请告知。

如何在选择更改时使用异步管道进行订阅

0 个答案: