为 MatTableDataSource 加入两个数组 - Angular/TS答案

【问题标题】：Join two Arrays for MatTableDataSource - Angular/TS为 MatTableDataSource 加入两个数组 - Angular/TS
【发布时间】：2019-08-02 02:18:51
【问题描述】：

我有两个对象

Client = [id, name]
Order = [id, clientId]

我有一个订单数组，想在一个垫子表中显示它们。我已经启动并运行了所有内容（因此显示 ID 和 ClientID），但是如何将订单中的 ClientID 与我的客户结合起来，以便显示真实姓名？

我找不到任何东西。可能没有在 Google 上搜索到正确的东西，并且无法为这个简单的任务想出一个想法！

最好的问候！

【问题讨论】：

你好马文，欢迎来到 SO！您的问题与 Angular 没有直接关系。您正在寻找的是 JavaScript 数组操作技术。我强烈建议查看.map 和.find methods of the Array Object

标签： angular typescript angular-material

【解决方案1】：

您可以按 clientId 对订单进行分组，然后将每个客户生成的订单数组添加到客户端对象：

const clients = [
  { id: 1, name: "first" },
  { id: 2, name: "second" }
];

const orders = [
  { id: 1, clientId: 1, text: "First Order" },
  { id: 2, clientId: 2, text: "Second Order" },
  { id: 3, clientId: 1, text: "Third Order" }
];

const groupedOrders = {};
orders.forEach(order => {
  if (!groupedOrders[order.clientId]) {
    groupedOrders[order.clientId] = [];
  }
  groupedOrders[order.clientId].push(order);
});

const groupedClientsAndOrders = clients.map(client => {
  return Object.assign({}, client, { orders: groupedOrders[client.id] || [] });
});

这会产生一个像这样的新数组：

[
    {
        "id": 1,
        "name": "first",
        "orders": [
            {
                "id": 1,
                "clientId": 1,
                "text": "First Order"
            },
            {
                "id": 3,
                "clientId": 1,
                "text": "Third Order"
            }
        ]
    },
    {
        "id": 2,
        "name": "second",
        "orders": [
            {
                "id": 2,
                "clientId": 2,
                "text": "Second Order"
            }
        ]
    }
]

如果您需要每个订单的客户，您还可以执行以下操作：

const clients = [
  { id: 1, name: "first" },
  { id: 2, name: "second" }
];

const orders = [
  { id: 1, clientId: 1, text: "First Order" },
  { id: 2, clientId: 2, text: "Second Order" },
  { id: 3, clientId: 1, text: "Third Order" }
];

const joinedOrders = orders.map(order => {
  const client = clients.filter(c => c.id == order.id)[0];
  return Object.assign({}, order, { client: client });
});

【讨论】：