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

Posted 2023-03-13

【中文标题】Angular 5 - 实现数据服务以从 MongoDB 读取 JSON

【英文标题】：Angular 5 - implement Data Service to read JSON from MongoDB

【发布时间】：2018-06-27 17:51:33

【问题描述】：

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

intro-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'];
  );

所以这很好用，但现在我更愿意创建一个数据服务类来在其他组件上使用它，以及访问我数据库中的不同表。 这是我迄今为止尝试过的，但没有成功：

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 中注册了服务，但我只是不知道如何将服务中的数据获取到我的组件中。

intro-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 的新手，希望你能指出我正确的方向。

【参考方案1】：

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

所以更好的方法是简单地从 data.service.ts 返回 observable Like:

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

并且，在 intro-animation.component 中订阅。 喜欢：

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

【讨论】：

非常感谢您的帮助，它成功了！我对 Promises 和 Observables 的了解还不够，无法理解其背后的过程。我现在确实更深入地研究了这些主题，现在更清楚了:)

【参考方案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()

【参考方案3】：

intro-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")
  

希望这会有所帮助