Angular - 从组件调用服务方法返回未定义答案

【问题标题】：Angular - Calling method on service from component returns undefinedAngular - 从组件调用服务方法返回未定义
【发布时间】：2018-05-13 09:13:22
【问题描述】：

我在服务文件中有这个服务，它是一个 http 调用。

    export class BackendServices {
      addons: IAddons[];   
      constructor(private http: HttpClient) { 
        this.getWorkOrders();
      }
     getAddons() {
      this.http.get<IAddons>(this.BASE_URL + '/addons/')
      .subscribe((data: any) => {
          this.addons = data;
      });
    }

组件部分然后从我的主要组件中，我有一个调用模态对话框的按钮。下面是主要组件的代码：

export class OrdersComponent { 
openAddonsDialog() {
    let dialogRef = this.pickAddonsDialog.open(PickaddonsComponent);
  }
}

然后我从对话框的构造函数调用服务上的 getAddons 方法。我只是想知道我们如何仅在插件属性从 http 调用接收到数据时才打开模式对话框。

export class PickaddonsComponent implements OnInit {
    constructor(public bs: BackendServices) {
        this.bs.getAddons();
    }

但它说 this.service.getAddons() 是未定义的。在 stackoverflow 上阅读了很多关于此的内容，从不同的帖子中尝试了很多步骤，但到目前为止都没有帮助我。

【问题讨论】：

你能分享错误截图吗
@ShashankVivek ，你好我已经添加了截图
您的错误是针对addons: IAddons[] 而不是getAddons()。如果你的图片是正确的，你能检查一下addons是否不是private
不，只是插件：IAddons[];
getAddons() 呢？错误是针对addons 而不是getAddons()。你能分享你的代码吗？您的屏幕截图与您的问题相矛盾

标签： angular observable rxjs5

【解决方案1】：

似乎已初始化的BackendService 具有未定义的属性addons。这是真的。因为只有在调用方法getAddons时才设置。

试试这个：

export class BackendServices {
  addons: IAddons[] = [];   
  constructor(private http: HttpClient) { 
    this.getWorkOrders();
  }
 getAddons() {
  return this.http.get<IAddons>(this.BASE_URL + '/addons/')
  .subscribe((data: any) => {
      this.addons = data;
  });
}

替换

 addons: IAddons[];

与

 addons: IAddons[] = [];

【讨论】：

谢谢@Tomislav。这似乎是正确的方向，在组件中，我有一个调用模态对话框的按钮，并且在模态对话框构造函数中我调用 getAddons 方法，当我第一次单击按钮时对话框打开时没有任何内容它，但是当我第二次单击它时，它会填充。我们如何解决这个问题。
如何让对话框仅在插件属性加载了值时才打开。
如果您能显示更多代码，那就太好了。但我建议，也许，您从对话框构造函数中提取调用getAddons 的逻辑。从服务器获取数据后尝试调用您的对话框。但请注意，getAddons 目前没有返回任何内容，也许它应该返回 Promise。
这正是我想要的。我如何让它返回一个承诺，不知道如何编码。根据要求，我用更多代码更新了帖子。
方法 getAddons 只需 return this.http.get() 因为 $http.get() 方法本身返回一个承诺。我会在上面更新我的答案。