Как сопоставить объект используя подписку в угловых - PullRequest
Новая
       25

Как сопоставить объект используя подписку в угловых

0 голосов
/ 21 января 2019

Я пытаюсь присвоить значения типу в моем компоненте. Моя подписка возвращает это, когда я делаю 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);
}

Ответы [ 4 ]

0 голосов
/ 21 января 2019

Вы должны создать 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 с полем List, я рекомендую вам использовать универсальный тип: 

 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);
}
0 голосов
/ 21 января 2019

Не могли бы вы, пожалуйста, так поступить. 

 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 =>{
 });
0 голосов
/ 21 января 2019

Вы также можете использовать оператор карты в rxjs для этого, если вам нужно повторно использовать этот getTasks метод.

map : Применяет заданную функцию проекта к каждому значению, испускаемому исходной наблюдаемой, и выводит результирующие значения в качестве наблюдаемой. 

// 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 пример. Подробнее об операторе карты здесь .

0 голосов
/ 21 января 2019

Вы можете просто использовать 

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

, и это выберет массив List.

И model станет 

model: dto[] = [];
...