Блог

Главная - Вопросы по программированию - Ошибка Angular http.get с {{responseType: ‘текст}}

Ошибка Angular http.get с {{responseType: ‘текст}}

#angular #typescript #http #rxjs

#angular #typescript #http #rxjs

Вопрос:

Всякий раз, когда я пытаюсь использовать {{RequestType: ‘text’}} в моем вызове http.get (url), я получаю сообщение об ошибке, которую я не могу определить, и разрешены только массивы и итерации; однако я беру свой объект и преобразую его в массив. Мне нужна некоторая помощь в понимании моей ошибки и в том, как исправить мою ситуацию

Когда я удаляю RequestType, массив проходит без проблем и отображается в моем интерфейсе. 

 ----service-----

 getAll(){
    const requestOptions: Object = {
      /* other options here */
      responseType: 'text'
    }
    return this.http.get<any>(this.url, requestOptions);
} 

---component .ts----- 

notificationsFass: any[];

  constructor(route: ActivatedRoute, private metaService: Meta, private notificationService: NotificationsFassService) {
    this.notificationsFass = [];
}


ngOnInit() {
    this.notificationService.getAll()
      .subscribe(notificationsFass => {
        this.notificationsFass = notificationsFass;
      }
        );
}

---html---

<div *ngFor="let m of notificationsFass">

---error----
ERROR Error: Error trying to diff '[{"incidentNumber":700,"createdByName":"FASS Notification","createdDate":"2019-03-27T09:18:15.000 0000"}]'. Only arrays and iterables are allowed

Комментарии:

1. Какой фактический тип содержимого отправляется с сервера? Если тип содержимого является application/json , не было бы причин использовать responseType: 'text' . «Данные», отображаемые в ошибке, выглядят как JSON, поэтому вы можете просто использовать значение по умолчанию responseType , чтобы HttpClient проанализировал полученный JSON для использования в вашем шаблоне. По какой причине вы хотите использовать responseType: 'text' ?

2. однако я беру свой объект и преобразую его в массив. : где? Опубликованный код нигде этого не делает. Вы пытаетесь выполнить итерацию по строке.

3. Это application / json; однако я получаю ошибки HttpResponse с моего сервера, когда он не может отобразить JSON из того, что я прочитал, что если у меня будет текст HttpResponse, я могу избавиться от этих ошибок

4. Нет, вы берете свой текстовый ответ с сервера (строку) и перезаписываете пустой массив, который есть notificationFass .

5.Правильно, *ngFor может отображать объекты только определенного формата, такие как массив объектов. Определенно не используйте, responseType: 'text' если ваш тип содержимого application/json . Это не будет проанализировано и будет просто строкой, которая ни при каких обстоятельствах не может быть использована структурными директивами, такими как *ngFor . Вероятно, вам следует поделиться логикой, по которой вы принимали ответ до text responseType изменения и превращали его в массив.

Ответ №1:

На основе json в сообщении об ошибке вам нужно выполнить следующее:

  • При определении интерфейса я использовал имя INotification . Это определит элементы, доступные в десериализованном ответе json.
  • Строго введите возвращаемые типы метода, а также укажите аргумент универсального типа в http.get<T> . При http.get вызове он попытается десериализовать ответ json с сервера в объектный граф. Определив INotification[] в качестве возвращаемого типа дополнительные вызывающие устройства, например, из компонента, теперь могут безопасно вызывать элементы возвращаемого типа like find или другие элементы Array.prototype, а также получать доступ к определенным элементам в экземплярах массива.

responseType: 'text' требуется только тогда, когда вы не отправляете ответ с сервера или когда ответ является текстовым, а не json. Первое может произойти с вызовами post or put или delete , когда сервер может отправлять только статус и не содержать тела сообщения в ответе.

Вот ваш сервисный код, переписанный на основе приведенного выше отзыва.

notificationsFassService.ts

 export interface INotification {
    incidentNumber: number;
    createdByName: string;
    createdDate: string;
}

export class NotificationsFassService {
    constructor (private readonly http: HttpClient) { }

    getAll():Observable<INotification[]> {
        return this.http.get<INotification[]>(this.url);
    } 
}

notificationsFassComponent.ts

 export class NotificationsFassComponent implements OnInit {
    notificationsFass: INotification[];

    constructor(route: ActivatedRoute, private metaService: Meta, private notificationService: NotificationsFassService) {
        this.notificationsFass = [];
    }

    ngOnInit() {
        this.notificationService.getAll()
          .subscribe(notificationsFass => {
             this.notificationsFass = notificationsFass;
          });
    }
}