подписка http не отображает данные в модель - PullRequest
Новая
       22

подписка http не отображает данные в модель

0 голосов
/ 25 февраля 2019

Предостережение: я новичок в angular, поэтому я мог неправильно понять, как это должно работать.

У меня есть конечная точка, которую я пытаюсь получить, чтобы получить некоторые данные.Я создал модель и подумал, что могу отобразить ответ прямо в массив моделей.

, но похоже, что при полном игнорировании модели я получаю свои данные обратно, но это весь ответ данных JSON.Не только совпадающее поле модели.

Это мой сервисный код 

getFaults() {
   return this.http.get<Fault[]>('<SITE>/api/faults')
}

Это моя модель 

export interface Fault {
description: string
  }

, и это код, который я звонюв page.ts 

export class Tab1Page {
  constructor(public faultsService: FaultsService) {}

  faults: Fault[];

  getFaults() {
    console.log("click");
    this.faultsService
      .getFaults()
      .subscribe((data: Fault[]) => console.log(data));
  }
}

вывод на консоль выглядит следующим образом, я ожидал, что это будет массив моделей неисправностей, с отображением только описания.Я что-то упустил?

[1]

Ответы [ 3 ]

0 голосов
/ 25 февраля 2019

Когда вы вызываете API, вы получаете все данные.Что вам нужно сделать, это просто использовать те данные, которые вам нужны, в этом описании случая.RxJS предоставляет оператор map , который вы можете использовать для преобразования данных в нужный вам формат:

Вот как вы можете использовать оператор карты RxJS для преобразования ваших данных: 

  getFaults() {
        console.log("click");
        this.faultsService
          .getFaults().map((data: any) => data.description)
          .subscribe((data: Fault[]) => console.log(data));
      }
0 голосов
/ 25 февраля 2019

Когда вы говорите, что 

.subscribe((data: Fault[]) => console.log(data));

Вы говорите, что data имеет тип Fault[], это будет проверено только во время компиляции, поэтому вы получите сообщение об ошибке, если попытаетесьнапример, data.status внутри subscribe().Во время выполнения данные будут напечатаны как есть.

Если вы хотите регистрировать только Fault.description, вам придется перебирать свой массив. 

getFaults() {
  console.log("click");
  this.faultsService
    .getFaults()
    .subscribe(data => {
       let faults = Fault[];
       data.forEach(object => {
          faults.push({description: object.description})
       });
       console.log(faults);
    });
}
0 голосов
/ 25 февраля 2019

Нет ничего плохого в коде или поведении.Это делает то, что ожидается.Модель просто машинописная интерфейс .Здесь он выполняет только проверку типов: 

getFaults() {
  return this.http.get<Fault[]>('<SITE>/api/faults')
}

Чтобы получить конкретное свойство description из элементов массива data, вам необходимо выполнить цикл по нему и получить следующие свойства: 

getFaults() {
  console.log("click");
  this.faultsService
    .getFaults()
    .subscribe((data: Fault[]) => {
      const descriptions = data.map(obj => {
        return { description: obj.description }
      });
      console.log(descriptions);
    });
}
...