如何在服务中提供动态DataSource作为const?

时间:2017-10-13 08:51:54

标签: json angular typescript

我有一个常量,我保存一个硬编码的JSON对象,我在我的服务中使用它作为DataSource创建一个带分页的数据表等。

const registeredUser:USers[] = [
  {_id: "11", email: "jane.doe@foo.de", fullName: "Jane Doe", created: "2017-06-14T16:06:44.457Z"},
  {_id: "59", email: "john.doe@foo.de", fullName: "John Doe", created: "2017-06-16T10:50:51.180Z"},
  ....
];

@Injectable()
export class ListUserService {
    constructor(public loginService:LoginService){}
    getUserDatasource(page:number, limit:number, sortBy?:string, sortType?:DatatableSortType): IPaginableUsers {
        const offset = (page - 1) * limit;
        let users;
        if (sortBy) {
            // HERE WHERE I USE/NEED the registeredUser DataSource
            users = registeredUser.sort((user1:USers, user2:USers) => {
        }
        ....
   ....
}

所以问题是我想摆脱硬编码的DataSource并从其他服务中动态获取日期。

因此,我在此服务中创建了一项功能: ListUserService 。从其他服务 LoginService 获取数据并将其传递给: const registeredUser:USers[] USers[]是一个界面。

代码:

const registeredUser:USers[] = this.getData ();

@Injectable()
export class ListUserService {
    constructor(public loginService:LoginService){}
    getUserDatasource(page:number, limit:number, sortBy?:string, sortType?:DatatableSortType): IPaginableUsers {
        const offset = (page - 1) * limit;
        let users;
        if (sortBy) {

        } 
    }

    getData () {
        this.loginService.getUsersList().subscribe(
            (res) => {
               console.log(JSON.stringify(res.message));
               return res.message;
            }, (err) => {

            }
        )
    }
}

不幸的是, ng build -prod 运行正常,没有错误。但Chrome控制台会出现以下错误: ERROR Error: Uncaught (in promise): TypeError: this.getData is not a function

在某种程度上,我理解错误,因为我试图在解释服务之前调用函数getData()

那么,如何将从getData()返回的JSON对象作为DataSource提供给: registeredUser:USers[]

我应该在 ListUserService 中创建第二个类并获取它的实例,以便传递给 registeredUser:USers[] 。这会有帮助吗?

1 个答案:

答案 0 :(得分:0)

您是否需要在registeredUser:USers[]课程之外使用ListUserService

假设您的登录服务看起来像这样:

export class LoginService {
    getUsersList(): Promise<Users[]> {
        // ... //
    }
}

你可以在方法中使用它,就像这样......

@autoinject
export class ListUserService {
    constructor(private loginService: LoginService) { }

    async getUserDatasource(page: number, limit: number, sortBy?: string, sortType?: DatatableSortType): Promise<IPaginableUsers> {

        const users = await this.loginService.getUsersList();

        const offset = (page - 1) * limit;

        if (sortBy) {
            // ... //
        } 
    }
}

如果你不想每次调用LoginService.getUsersList从服务器上获取它,你可以在LoginService或ListUserService中实现某种缓存。

如果失败,您可以移动registeredUser内的ListUserService媒体资源。没有经过测试,但有点类似......

@Injectable()
export class ListUserService {
    constructor(public loginService:LoginService){}

    getUserDatasource(page:number, limit:number, sortBy?:string, sortType?:DatatableSortType): IPaginableUsers {
        const offset = (page - 1) * limit;
        let users;
        if (sortBy) {

        } 
    }

    private registeredUser:USers[];

    getData () {
        this.loginService.getUsersList().subscribe(
            (res) => {
               console.log(JSON.stringify(res.message));
               this.registeredUser = res.message; // may need to process or map the data into your USers type?
            }, (err) => {

            }
        )
    }
}