Arrays 在服务文件中调用webservice并在其他位置重复使用

我需要帮助在我的应用程序的其他部分重新使用服务功能，更具体地说，在HTML模板中显示某个参数（在我的例子中是“title”）

所以基本上我创建了一个服务：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class UserInfoService {

loading: boolean;
dataSet = [];

constructor(public http: HttpClient) { 

 this.getList();

}

getList(){
  this.loading = true;
  this.http.get('https://jsonplaceholder.typicode.com/posts')
  .subscribe(data => {
  this.dataSet = [data];
  this.loading = false;
  });
}}

然后我有一个导入上述服务的组件：

import { Component, OnInit } from '@angular/core';
import { UserInfoService } from '../../models/user-info.service';

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

 res = [];

constructor( private UserInfoServiceData:UserInfoService ) { }

ngOnInit() {

this.res = [this.UserInfoServiceData];

}}

最后，在我的HTML模板中，我试图显示来自web服务的“标题”。目前我正在获取[object]

<p>
    <span *ngFor="let res of res">{{res | json}}</span>
</p>

{{res|json}

可观察

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

@Injectable()
export class UserInfoService {

loading: boolean;
private dataSetSource = new Subject<any | Error>();
public _dataSet:  Observable<any | Error> = this.dataSetSource.asObservable();


constructor(public http: HttpClient) { 

//try to not put things here if you can

}

getList() {
this.getHTTPList();
 return this._dataForm;
}

private getHTTPList(){
  this.loading = true;
  this.http.get('https://jsonplaceholder.typicode.com/posts')
  .subscribe(data => {
  this.dataSetSource.next(data);
  this.loading = false;
  });
}}



import { Component, OnInit } from '@angular/core';
import { UserInfoService } from '../../models/user-info.service';

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

 res = [];

constructor( private UserInfoServiceData:UserInfoService ) { }

ngOnInit() {

this.UserInfoServiceData.getList().subscribe (
(data: any) => { 
this.res.push(data);
}
);

}}

<p>
    <span *ngFor="let var of res">{{var | json}}</span>
</p>

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient}；
从“rxjs/Observable”导入{Observable}；
从'rxjs/Subject'导入{Subject}；
@可注射（）
导出类UserInfoService{
加载：布尔；
私有数据集源=新主题（）；
public _dataSet:Observable=this.dataSetSource.asObservable（）；
构造函数（公共http:HttpClient）{
//如果可以的话，尽量不要把东西放在这里
}
getList（）{
这是一个.getHTTPList（）；
返回此。\u数据表单；
}
私有getHTTPList（）{
这是。加载=真；
this.http.get（'https://jsonplaceholder.typicode.com/posts')
.订阅（数据=>{
this.dataSetSource.next（数据）；
这一点：加载=错误；
});
}}
从“@angular/core”导入{Component，OnInit}；
从“../../models/user info.service”导入{UserInfoService}；
@组成部分({
选择器：“应用程序用户”，
templateUrl:“./user.component.html”，
样式URL:['./user.component.css']
})
导出类UserComponent实现OnInit{
res=[]；
构造函数（私有UserInfoServiceData:UserInfoService）{}
恩戈尼尼特（）{
这是.UserInfoServiceData.getList（）.subscribe(
（数据：任意）=>{
此.res.push（数据）；
}
);
}}

{{var | json}}

res是您的用户信息服务本身。您必须编写此.res=this.UserInfoServiceData。dataSet@Eliseo我这样做了，但它似乎给了我一个空白的结果谢谢，我认为需要更多的可观察的导入语句（rxjs）你是对的，我已经修复了它。如果它是正确的答案，并且你认为它有助于你记住将它标记为正确的答案，那么你也会帮助其他人好吧，似乎主题也需要导入：从“rxjs”导入{subject，Observable}；。尽管订阅部分有一个错误：this.UserInfoServiceData.subscribe（表示“userInfoService”类型上不存在订阅）是的，我省略了函数调用，从“rxjs”导入{Subject，Observable}；。有：）。希望它能帮助Hanks还需要声明_dataForm变量