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

这是异步的，因此最有可能的是，当您致电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)
    })
}

如果您正在寻找没有提出请求，如果＆＃34;它已在＆＃34;之前完成，请使用服务中的变量，在发出http请求之前检查它是否有值，否则将其作为观察到。组件保持不变，它只是订阅来自服务的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已被弃用。

Answer 2

你在调用一个函数时缺少paranthesis，它应该如下，

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

无法从服务Angular 5获得财产

2 个答案: