无法从服务 Angular 5 中获取属性

Question

我在一个星期内通过创建一个简单的网上商店学习了 Angular。我还在基础上，我正在尝试加载一个包含来自 REST 服务的数据的菜单。为此，我使用以下配置：

categories.services.ts

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


@Injectable()
export class CategoriesService {

    private categories = [];

    constructor(private http: Http){
        this.setCategories();
    };

    setCategories(){
        if (this.categories != []){
            this.http.get('http://someurl:1234/someapi/somevalue')
            .toPromise()
            .then((data) => {
                console.log('inside');
                console.log(data.json().response);
                this.categories = data.json().response;
            })
            .catch((err) => {
                console.log(err);
            })
        }
    }

    function getCategories(){
        return this.categories; 
    }

}

main.component.ts

import { Component, OnInit, Inject } from '@angular/core';
import { CategoriesService } from '../categories/categories.service';

@Component({
    selector: 'app-main',
    templateUrl: './main.component.html',
    styleUrls: ['./main.component.css']
})

export class MainComponent{

    categories = [];

    constructor(private cat:CategoriesService){
        this.categories = cat.getCategories;
        console.log(this.categories);
    }

    notify(private new_categories){
        this.categories = new_categories;
    }

}

这里的问题是 在 Web 控制台中我可以按预期看到 REST 服务的响应，但是组件内的日志打印一个空数组。谢谢你，对不起我的英语

Answer 1

调用函数时漏了括号，应该是这样的，

constructor(private cat:CategoriesService){
        this.categories = cat.getCategories(); //check this line
        console.log(this.categories);
}

Answer 2

这是异步的，所以最有可能发生的情况是，当您调用 getCategories 时，变量 categories 还没有值。我们通常做的，是直接在组件中订阅请求，所以修改你的代码为：

服务：

@Injectable()
export class CategoriesService {

  constructor(private http: Http){ }

  getCategories(){
    return this.http.get('http://someurl:1234/someapi/somevalue')
      .map(res => res.json().response)
  }

}

组件：

categories = [];

constructor(private cat:CategoriesService){ }

ngOnInit() { 
  this.cat.getCategories()
    .subscribe(data => {
       this.categories = data;
       console.log(this.categories)
    })
}

如果您希望在 "it has been done before" 时不发出请求，请在服务中使用变量，在发出 http 请求之前检查它是否具有值，否则 return 将其作为 Observable .组件保持不变，它只是订阅来自服务的 Observable，不知道它是否是 http 请求的结果。

符合以下内容：

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/do';

@Injectable()
export class CategoriesService {

  private categories = [];

  constructor(private http: Http){ }

  getCategories(){
    if(this.categories.length) {
      return Observable.of(this.categories)
    } else { 
      return this.http.get('http://someurl:1234/someapi/somevalue')
        .do(res => this.categories = res.json().response)
        .map(res => res.json().response)
    }
  }
}

同时考虑使用 HttpClient 而不是 Http，因为 Http 已被弃用。

无法从服务 Angular 5 中获取属性

Can't get property from service Angular 5

angular

angular5

无法从服务 Angular 5 中获取 属性

Can't get property from service Angular 5

angular

angular5

无法从服务 Angular 5 中获取属性