如何在angular2 Services调用和组件之间管理数据类型?

时间:2017-01-10 16:48:27

标签: angular

我开发了一个返回类型为Object的服务:

import { Injectable } from '@angular/core';
import {ClientApi} from '../shared/sdk/services';
import {CategoryApi} from '../shared/sdk/services';
@Injectable()
export class CategoryService {
public categoriesList;
name = '';

constructor(private category: CategoryApi, private userApi: ClientApi) {}

getCategories(){
        this.category.find({where: {clientId: this.userApi.getCurrentId()}}).subscribe((data) => {
        this.categoriesList = data;
            console.log("type : " + typeof(this.categoriesList));
            console.log ("data:" + JSON.stringify(data));
        return data;
    }, err => {
        console.log(err);
    });
}
}

在ts组件文件中,我调用此服务:

    import {Component} from '@angular/core';
import {CategoryService} from './category.service'

@Component({
    selector: 'category',
    templateUrl: './category.component.html',
    styleUrls: ['./category.component.css'],
    providers: [CategoryService]
})

export class CategoryComponent {

    public categories;

    constructor(categoryService: CategoryService)
    {
        this.categories = categoryService.getCategories();
        console.log ("categories: " + this.categories);

    }

}

我服务中的变量数据是对象类型,在我的组件ts文件中,我有一个未定义类型。结果是HTML文件无法读取组件属性。

任何帮助都将不胜感激。

提前致谢。

2 个答案:

答案 0 :(得分:1)

我想你想要的是

getCategories(){
        return this.category.find({where: {clientId: this.userApi.getCurrentId()}}).map((data) => {
        this.categoriesList = data;
            console.log("type : " + typeof(this.categoriesList));
            console.log ("data:" + JSON.stringify(data));
        return data;
    }, err => {
        console.log(err);
    });
}

然后像

一样使用它
categoryService.getCategories().subscribe(data => this.categories = data)

<div *ngFor="let c of categoryService.getCategories() | async">...</div>

您无法在map()subscribe()或任何其他运营商之外获取数据。进行异步调用后,此调用将保持异步,无法解决此问题。

答案 1 :(得分:0)

问题是您的服务调用的结果是通用的,而不是应用程序中的已知类型。要消除此错误,您在订阅中接收结果时使用var关闭类型检查;并通过声明类别“任何”

的categoriesList

然后你可以像以前一样在你的应用程序(html模板)中使用它!

请看这里的片段:

    public categoriesList:any;

    ...
    this.dataService.getRecords('MT_Entity')
        .subscribe((data: any[]) => {
            var response: any = data;
            var resprecords = response.items;
            this.categoriesList = resprecords;
        }, err => {
          console.log(err);
    });
    ...