Angular 5 - 实施数据服务以从 MongoDB 读取 JSON

Question

我正在尝试实施数据服务以从 mongoDB 读取 json 数据。我能够直接在我的组件的 ngOnInit() 中实现该功能，但是当我尝试实现一个单独的数据服务时，我无法将 json 数据放入我的组件中。

简介-animation.component.ts:

export class IntroAnimationComponent implements OnInit {
  keywords: string[];
  ...
}

constructor(
  private _http: HttpClient) {
  ...
}

ngOnInit() {
  this._http.get('./api/keywords').subscribe(res => {
    this.keywords = res['data'];
  });
}

所以这工作正常，但现在我更愿意创建一个数据服务 class 以在其他组件上使用它以及访问我数据库中的不同表。这是我到目前为止尝试过的方法，但没有成功：

data.service.ts

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class DataService {
  results: string[];

  constructor(private _http: HttpClient) { }
    getKeywords(): string[] {
      this.getKeywordsObservable().subscribe(res => {
      this.results = res['data'];
    });
    return this.results;
  }

  getKeywordsObservable(): Observable<any> {
    return this._http.get("./api/keywords")
  }
}

我在我的 app.module 中注册了该服务，但我只是不知道如何从该服务中获取数据到我的组件中。

简介-animation.component.html

<div class="keywords-container" *ngFor="let keyword of keywords">
  <div class="keyword" [ngStyle]="setKeywordFontParams()">
    {{ keyword.name }}
  </div>
</div>

mongoDB json 数据

{
"status": 200,
"data": [
    {
        "_id": "5a60740d94d06e102e8c2475",
        "name": "Passion"
    },
    {
        "_id": "5a60745be4b93b2c36f6a891",
        "name": "Grandeur"
    },
    {
        "_id": "5a607461e4b93b2c36f6a892",
        "name": "Prestige"
    }
],
"message": null
}

我对 Angular 还是个新手，希望您能为我指明正确的方向。

Answer 1

简介-animation.component.ts:

import {DataService} from "<location of service>" 

    export class IntroAnimationComponent implements OnInit {
      keywords: string[];

    constructor(
      private _service: DataService) {
      ...
    }

    ngOnInit() {
      this._service.getKeywords().subscribe(res => {
        this.keywords = res;
      });
    }

data.service.ts

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class DataService {

  constructor(private _http: HttpClient) { }


  getKeywords(): Observable<any> {
    return this._http.get("./api/keywords")
  }
}

希望这会有所帮助

Answer 2

您好，您可以这样做：

import { Injectable } from '@angular/core';
import 'rxjs/add/operator/map';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class DataService {

  constructor(private _http: HttpClient) { }

  public getKeywords(): any {
    return this._http.get('./api/keywords').map(res => {
      return res['data'];
    });
  }

}

现在您可以在组件中注入此服务并调用它 dataService.getKeywords()

Answer 3

您的数据服务 getKeywords() 方法进一步调用 http.get，即 async。所以当你做 return this.results; 它实际上仍然是 undefined 所以你什么也得不到。

所以更好的方法是简单地 return 从 data.service.ts 观察到：

 getKeywordsObservable(): Observable<any> {
    return this._http.get("./api/keywords")
  }

并且，在 intro-animation.component 内订阅。喜欢 :

ngOnInit() {
      this._dataService.getKeywordsObservable().subscribe(res => {
        this.keywords = res['data'];
      });
    }

Angular 5 - 实施数据服务以从 MongoDB 读取 JSON

Angular 5 - implement Data Service to read JSON from MongoDB

json

mongodb

typescript

angular

angular5