Question

我不得不说HttpClient Observables，订阅等等都是非常困难/耗时的。

我一直在研究一个问题并撕掉我的头发。我有一项服务，我需要能够执行映射功能。

  loadAllSummary(organisationId: number) {
    return this.http.get('/api/aircrafts/organisations/' + organisationId)
      .pipe(
        map(data => data.forEach(datum => {
          console.log('why am i not getting here! ' + JSON.stringify(data));
          return this.mapToSummary(datum);
        }))
      );
  }

使用mapToSummary（）方法：

  private mapToSummary(aircraft: Aircraft): IAircraftSummary {
    const lastDate: Date = new Date(Math.max.apply(null, aircraft.workorders.map(function(e) {
      return new Date(e.date);
    })));

    return new AircraftSummary({
      lastWork: lastDate,
      rego: aircraft.registration,
      make: aircraft.make,
      model: aircraft.model,
      contact: (aircraft.owner.type.endsWith('primary')) ? aircraft.owner.principal : aircraft.operator.principal,
      phone: (aircraft.owner.type.endsWith('primary')) ? aircraft.owner.contact.phone : aircraft.operator.contact.phone
    });
  }

现在，我需要将这些摘要作为视图的输入数据，因此我从interwebs借用了代码并创建了这个ResolverService：

@Injectable()
export class AircraftsResolverService implements Resolve<IAircraftSummary[]> {

  constructor(private service: AircraftService,
              private router: Router) { }

  resolve(route: ActivatedRouteSnapshot,
          state: RouterStateSnapshot): Observable<IAircraftSummary[]> {
    console.log('called AircraftsResolverService')
    const id = route.params['id'];
    if (isNaN(+id)) {
      console.log(`Organisation id was not a number: ${id}`);
      this.router.navigate(['/login']);
      return Observable.of(null);
    }
    return this.service.loadAllSummary(+id)
      .map(summaries => {
        console.log(summaries)
        if (summaries) {
          return summaries;
        }
        console.log(`Summaries were not found: ${id}`);
        this.router.navigate(['/organisations/', +id]);
        return null;
      })
      .catch(error => {
        console.log(`Retrieval error: ${error}`);
        this.router.navigate(['/organisations/', +id]);
        return Observable.of(null);
      });
  }
}

然后我在ngOnInit调用中引用...

ngOnInit（）{

this.currentUser = this.authenticationService.returnCurrentUser();

this.route.data
  .subscribe(({aircrafts}) => {
    this.aircrafts = aircrafts;

    const id = +this.route.snapshot.paramMap.get('id');
    console.log(' where are my aircraft!' + JSON.stringify(aircrafts));
    this.ELEMENT_DATA = aircrafts;
    this.displayedColumns = ['Last Work', 'Rego', 'Make', 'Model', 'Contact', 'Phone'];
    this.dataSource = new MatTableDataSource(this.ELEMENT_DATA);
    this.dataSource.sort = this.sort;
    console.log(id);
    if (id) {
      this.organisationService.getById(id).subscribe(org => {
        this.organisation = org;
      });
    } else {
      console.log('its bad');
    }

  });

console.log(this.dataSource);

}

订阅下的控制台日志未定义，服务下的console.logs永远不会被触发。所以再一次，我发现自己不明白为什么订阅会发生火灾或不发生火灾，或者他们做什么。

我如何通过这个？谢谢大家。

编辑：似乎问题实际上在ResolverService中，我已经能够确定数据服务正在获取结果并且它们是正确的。由于某种原因，解析器服务无法看到它们。

Answer 1

答案在路线解析器中，或者更确切地说是app-routing-module。我应该把它包含在这个问题中，因为有些棱角分明的它会把它拿起来

我试图这样做：。

  { path: 'organisations/:orgId/aircrafts/:id', component: AircraftsComponent, resolve: {aircrafts : AircraftsResolverService}, canActivate: [AuthGuard] },

但你不能，你必须这样做：

  { path: 'organisations/aircrafts/:orgId/:id', component: AircraftsComponent, resolve: {aircrafts : AircraftsResolverService}, canActivate: [AuthGuard] },

会产生非常不稳定的网址，但是，嘿，不管有什么用，对吧？

Angular 5 HTTPClient不返回RouteResolver

1 个答案: