Question

我正在尝试将值关联到组件中的一种类型。当我执行console.log

时，我的订阅正在重试此操作

this.srvice.getTasks(this.request).subscribe(heroes => console.log(heroes));



{
    "List": [
        {
            "id": 17,
            "pro": 1,
            "name": "Ram",
            "UserId": 2,
            "duedate": "2018-01-01T00:00:00",
            "status": 1,
            "active": false
        },
        {
            "id": 3,
            "pro": 1,
            "name": "My Name",
            "UserId": 1,
            "duedate": "2018-01-01T00:00:00",
            "status": 2,
            "active": false
        },
    ]
}

但是当我执行任务时，它不起作用。我认为它需要直接提供列表，但是我的对象包装在“列表”中。我该如何提取呢？我刚接触角

这就是我分配值的方式

组件类：

model: dtoModel = {
          List : []
       };

 this.taskService.getTasks(this.request).subscribe(heroes => this.model = heroes);

模型

export interface dto {
    id: number;
    pro: number;
    name: string;
    UserId: number;
    duedate: string;
    status: number;
    active: boolean;
  }

export interface dtoModel {
    List: dto[];
}

在使用中

getTasks (requestSearch: TaskRequest): Observable<dto[]> {
        return this.http.post<dto[]>(this.Url, requestSearch,  httpOptions);
}

Answer 1

您可以使用

this.taskService.getTasks(this.request).subscribe(heroes => this.model = heroes.List);

，这将选择List数组。

model将变为

model: dto[] = [];

Answer 2

您能这样做吗？

 this.srvice.getTasks(this.request)
 .map(data =>{
   //do your logic and convert the data accordingly.
   // then result will be sent to subscribe block
  })
 .subscribe(result =>{
 });

Answer 3

如果您需要重用此getTasks方法，也可以在rxjs中使用map运算符。

地图：将给定的项目函数应用于源Observable发出的每个值，并将结果值作为Observable发出。

// In your service method
getTasks() {
  return this.http.get(<url>)
    .pipe(map(tasksObj=> {

       return tasksObj.List;
    }));
}

如果您使用的是角度5，请在下面使用

getTasks() {
  return this.http.get(<url>)
    .pipe(map(tasksObj=> {

       return tasksObj.List;
    }));
}

检出此Stackblitz示例。了解有关地图运营商here的更多信息。

Answer 4

您应该创建2个如下所示的界面：

export interface dtoModel = {
   List : ListItem[]
};

export interface ListItem {
    id: number;
    pro: number;
    name: string;
    UserId: number;
    duedate: string;
    status: number;
    active: boolean;
}

然后您可以通过以下方式为您设置类型：

getTasks (requestSearch: TaskRequest): Observable<dtoModel> {
    return this.http.post<dtoModel>(this.Url, requestSearch,  httpOptions);
}

如果您所要求的全部返回带有列表字段的json，我建议您使用通用类型：

 export interface dtoModel<T> = {
       List : <T>[]
 };

 export interface ListItem {
        ....
 }

请求将如下所示：

getTasks (requestSearch: TaskRequest): Observable<dtoModel<ListItem>> {
        return this.http.post<dtoModel<ListItem>>(this.Url, requestSearch,  httpOptions);
}

如何使用角度订阅来映射对象

4 个答案: