元素数组不会被接口填充

Question

我在 Angular 中提出以下请求并将响应保存在变量中：

conversations: Conversation[];

// ChatService
getConversations() {
    return this.http.get<Conversation[]>('/chat/conversations');
}

this.chatService.getConversations().subscribe(
    (response: Conversation[]) => this.conversations = response
);

这是来自服务器的 JSON 数据：

[  
   {  
      "chatRoomId":"096b8be1-2411-4cb1-94e0-ed96c51c23d8",
      "name":"Bar",
      "profilePicture":"...",
      "conversation":[  
         {  
            "name":"Bar",
            "message":"Hello!",
            "createdAt":"2018-09-30T06:50:49.000+0000"
         },
         {  
            "name":"Foo",
            "message":"Hi",
            "createdAt":"2018-09-30T11:49:05.000+0000"
         }
      ]
   }
]

TypeScript 模型：

export interface Conversation {
  chatRoomId: string;
  name: string;
  profilePicture: string;
  conversation: ChatMessage[]
}

export interface ChatMessage {
  name: string;
  message: string;
  createdAt: string;
}

问题：

如果我在控制台中输出变量，则对话（conversation: ChatMessage[]）是一个空数组元素。

如果我使用this.http.get<any>('...') 发出请求，对话将按预期存储。

Answer 1

有几种方法可以做你想做的事，但根据我的经验，使用这个库是最简单的：https://github.com/typestack/class-transformer

以下是它在您的情况下的工作方式。首先，我会将您的接口更改为 Typescript 类。

import { Type } from 'class-transformer';

export class Conversation {
    chatRoomId: string;
    name: string;
    profilePicture: string;

    @Type(() => ChatMessage)
    conversation: ChatMessage[]

    constructor(args: Conversation) {
      Object.assign(this, args);
    }
}

export class ChatMessage {
    name: string;
    message: string;
    createdAt: string;

    constructor(args: ChatMessage) {
      Object.assign(this, args);
    }
}

与这些接口相比，一些事情发生了变化::

1. @Type 装饰器的使用来自 class-transformer 模块。这允许您转换嵌套对象。这是文档：https://github.com/typestack/class-transformer#working-with-nested-objects
2. 我们添加了constructor，它允许您创建这些类的实例并将属性传递给它们各自类型的属性。看看这篇Converting httpClient answer to model objects [Angular 6] 的帖子，因为它更能说明这里发生的事情。

那么在您的服务中，您的代码是这样变化的：

import { plainToClass } from 'class-transformer';    

conversations: Conversation[];

// ChatService
getConversations() {
    return this.http.get<Conversation[]>('/chat/conversations');
}

this.chatService.getConversations().subscribe(
    (response: Conversation[]) => {
        this.conversations = plainToClass(Conversation, response) as Conversation[]
    }
);

plainToClass 将获取原始 JSON 响应并将其转换为对话类的实例。如果您 console.log out this.conversations 您将看到它返回一个对话数组，每个对话都有一个名为 conversations 的 ChatMessage 类型的数组属性。