带有 {{responseType: 'text}} 的 Angular http.get 错误答案

【问题标题】：Angular http.get error with {{responseType: 'text}}带有 {{responseType: 'text}} 的 Angular http.get 错误
【发布时间】：2019-08-18 08:57:16
【问题描述】：

每当我尝试在我的 http.get(url) 调用中使用 {{requestType: 'text'}} 时，我都会收到一个错误，我无法区分并且只允许使用数组和可迭代对象；但是，我将我的对象转换为一个数组。我需要一些帮助来了解我的错误以及如何解决我的情况

当我删除 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

【问题讨论】：

从服务器发送的实际内容类型是什么？如果内容类型是application/json，则没有理由使用responseType: 'text'。错误中显示的“数据”看起来是 JSON，因此您可以使用默认的 responseType 以便 HttpClient 解析接收到的 JSON 以在您的模板中使用。您想使用responseType: 'text' 的原因是什么？
但是，我将我的对象转换为一个数组。：在哪里？发布的代码不会在任何地方这样做。您正在尝试遍历字符串。
是 application/json ;但是，当我的服务器无法从我读过的内容中呈现 JSON 时，我会从服务器收到 httpResponse 错误，如果我可以拥有 httpResponse 文本，我可能会摆脱这些错误
不，您从服务器获取文本响应（字符串）并覆盖空数组 notificationFass。
对，*ngFor 只能渲染特定格式的对象，例如对象数组。如果您的内容类型是application/json，绝对不要使用responseType: 'text'。它不会被解析，只是一个字符串，在任何情况下都不能被结构指令使用，例如*ngFor。您可能应该分享在 text responseType 更改并将其转换为数组之前获取响应的逻辑。

标签： angular typescript http rxjs

【解决方案1】：

根据报错信息中的json，你需要做以下事情：

定义一个接口，我用了INotification这个名字。这将定义反序列化 json 响应中可用的成员。
强烈键入方法返回类型，并在http.get<T> 中提供泛型类型参数。当http.get 被调用时，它将尝试将来自服务器的 json 响应反序列化为对象图。通过将 INotification[] 定义为返回类型，进一步的调用者（例如来自组件）现在可以安全地调用返回类型上的成员，例如 find 或其他 Array.prototype 成员，以及访问数组中实例上定义的成员。

responseType: 'text' 仅在您未从服务器发出响应时才需要或，当响应是文本而不是 json 时。前者可能发生在 post 或 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;
          });
    }
}

【讨论】：