Маршрутизатор Angular 5 не получает данные

Question

В настоящее время я разработал простой пользовательский интерфейс, позволяющий пользователю выбирать опцию из списка.Теперь проблема в том, что созданный мной угловой сервис доставляет данные после рендеринга страницы, поэтому раскрывающийся список никогда не получает данные из сервиса.

Вначале я использовал вызов конечной точки для 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;
  }
}

document-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;
    });
}
}

document.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