Angular 5路由器解析器未获取数据

Question

目前，我开发了一个简单的 UI 以允许用户从列表中选择一个选项。现在的问题是，我创建的 Angular 服务在页面呈现后交付数据，因此下拉菜单永远不会从服务中获取数据。

一开始，我一直在使用 Angular 服务对 api 服务的端点调用，它提供数据以填充下拉列表，如果我在本地使用它，效果很好。当我尝试从 mLab 或 MongoDB Atlas 服务等远程服务器错误中获取信息时，就会出现该错误。在最后一种情况下，信息到达，但在页面呈现之后，下拉菜单永远不会显示选项。

阅读互联网和文档后，我发现使用角度解析器可以帮助获取之前加载页面的数据，但直到现在我才知道它是如何工作的。也许有人可以帮助我吗？

docs-list.component.ts

import { Component, OnInit } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import { HttpClient } from '@angular/common/http';
import { ActivatedRoute, Router } from '@angular/router';
import 'rxjs/add/operator/toPromise';
import swal from 'sweetalert2';
import { DocumentationService } from '../documentation.service';
import { Logger } from '../logger.service';

@Component({
    selector: 'app-docs-list',
    templateUrl: './docs-list.component.html',
    styleUrls: ['./docs-list.component.css']
})
export class DocsListComponent implements OnInit {

  urlSelected = '';
  docsAvailable = [
  ];

  constructor(private router: Router,
              private route: ActivatedRoute,
              private http: HttpClient,
              private documentationService: DocumentationService) { }

  ngOnInit() {

    this.docsAvailable = this.route.snapshot.data['docs'];
    console.log(this.docsAvailable);
  }

  onChange(value) {
    // console.log(value);
    this.urlSelected = value;
  }
}

documentation-resolver.service.ts

 import { Injectable } from '@angular/core';
 import { Router, Resolve, ActivatedRouteSnapshot } from '@angular/router';
 import { DocumentationService } from './documentation.service';
 import { Observable } from 'rxjs/Observable';
 import 'rxjs/add/operator/map';

 @Injectable()
 export class DocumentationResolver implements Resolve<any> {
    constructor(
        private documentationService: DocumentationService,
        private router: Router
    ) { }

    resolve(route: ActivatedRouteSnapshot): Observable<any> {
    return this.documentationService.getDocs().map(docs => {
        console.log(docs);
        return docs;
    });
}
}

documentation.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import {Observable} from 'rxjs/Observable';
import { Logger } from './logger.service';

const httpOptions = {
    headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable()
export class DocumentationService {

  constructor(
    private http: HttpClient,
    private logger: Logger) { }

  getDocs(): Observable<any> {
    return this.http.get('documents');
  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { HttpClientModule } from '@angular/common/http';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { DocsListComponent } from './docs-list/docs-list.component';
import { FormsModule } from '@angular/forms';

import { Logger } from './logger.service';
import { DocumentationService } from './documentation.service';
import { DocumentationResolver } from './documentation- 
    resolver.service';

const appRoutes: Routes = [
  { path: '',
     component: DocsListComponent,
    resolve: {
       docs: DocumentationResolver
    }
  }
];

@NgModule({
  declarations: [
    AppComponent,
     DocsListComponent,
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    RouterModule.forRoot(
      appRoutes,
      {enableTracing: true}
    )
  ],
   providers: [
     Logger,
     DocumentationService,
     DocumentationResolver
   ],
   bootstrap: [
     AppComponent
   ]
 })
 export class AppModule { }

提前致谢。

Answer 1

您正在将响应映射到空对象

return this.documentationService.getDocs().map(user => {});

为什么（很可能）文档是用户是另一个谜。请针对此类错误修改您的代码。

此外，如果您开始使用类型控制并停止使用 <any>，但具体类型除外，编译器会拾取此类错误，向您解释 {} 与 X 类型的签名不匹配