服务中的 Angular、httpClient 检索 CSV 数据并将 JSON 数据发送到组件答案

【问题标题】：Angular, httpClient in service retrieves CSV data and sends JSON data to component服务中的 Angular、httpClient 检索 CSV 数据并将 JSON 数据发送到组件
【发布时间】：2021-01-27 11:28:53
【问题描述】：

我正在尝试在 Angular 项目中创建一个服务，该服务从 API 服务器检索 CSV 数据并将 JSON 传递给组件。

控制台显示来自服务的漂亮 JSON 数据，但组件显示更早的 组件数据：UNKNOWN。

我使用 csvtojson 模块将 CSV 转换为 JSON

组件

  getData(): any {
    this.storeService.getData()
      .subscribe(data => {
        console.log('Component data: ', data);
      }, error => {
        console.log(error);
      });
  }

服务“storeService”

  getData(): Observable<any> {
    return this.httpClient
      .get('http://llocalhost:3000/user/11', { responseType: 'text' as 'text' })
      .pipe(
        map((data) => {
          csv({
            noheader: true,
            trim: true,
            delimiter: ';'
          })
            .fromString(data)
            .then(jsonData => {
              // This is OK - I can see a JSON data
              console.log('Service jsonData', jsonData);
              // How to send this jsonData to component?
              return jsonData;
            })
        })
      )
  }

感谢您的帮助。

【问题讨论】：

在csv()中添加return语句。所以把这个return csv({})，你返回的jsonData返回到地图

标签： json angular csv observable httpclient

【解决方案1】：

这个问题可以通过创建一个 behaviorSubject 并将获取的数据分配给该变量来轻松解决。当您需要访问组件中的数据时。 ts 文件，你可以简单地订阅 behaviorSubject 并获取数据。

订阅后，您可以简单地调用 this.storeService.getData();并自动获取更新后的值（因为您已经订阅了behaviourSubject，它会在值更改时更新组件）。

将您的服务“storeService”更新为以下内容

yourJsonData: BehaviorSubject<any> = new BehaviorSubject<any>(null);

 getData(): Observable<any> {
 // DO NOT RETURN HERE
    this.httpClient
      .get('http://llocalhost:3000/user/11', { responseType: 'text' as 'text' })
      .pipe(
        map((data) => {
          csv({
            noheader: true,
            trim: true,
            delimiter: ';'
          })
            .fromString(data)
            .then(jsonData => {
              // This is OK - I can see a JSON data
              console.log('Service jsonData', jsonData);
              // STORE THIS JSONDATA TO A BEHAVIOUR SUBJECT
              this.yourJsonData = jsonData;
            })
        })
      )
  }

现在将您的 Component.ts 文件更新为此....

   getData(): any {
    this.storeService.getData();
    
    this.storeServiceVariable.yourJsonData.subscribe((data) => {
      console.log('Component data: ', data);
    });   
  }

【讨论】：

【解决方案2】：

尝试使用：

只需在服务中返回数据，然后在组件中按如下方式做你的事情

Service.ts

getData(): Observable<any> {
    return this.httpClient
      .get('http://llocalhost:3000/user/11', { responseType: 'text' as 'text' });
}

Component.ts

getData(): any {
    this.storeService.getData()
      .subscribe(data => {
        csv({
            noheader: true,
            trim: true,
            delimiter: ';'
        }).fromString(data).then(jsonData => {
             // This is OK - I can see a JSON data
             console.log('Service jsonData', jsonData);
        });
      }, error => {
        console.log(error);
      });
  }

我想这会对你有所帮助....

【讨论】：