1

我正在调用 Angular 中的 Api，并在 Angular 7 中的 mat-table 上显示数据。

响应是这样的

{
            "promo": "Mon",
            "start": "2019",
            "carrier": "[UPS Ground, UPS Express, UPS Expedited]",
            "end": "2020",
            "shipTime": "[10, 2Day, Overnight]",
            "price": "[0.0, 14.99, 24.99]", 
        }

我在像这样的 Mat 表上显示这些数据

Mon|2019| [UPS Ground, UPS Express, UPS Expedited] | 2020 | [10, 2Day, Overnight]| [0.0, 14.99, 24.99]

But i want to display it like this 

Mon | 2019 | UPS Ground | 2020 |10 | 0.0

Mon | 2019 | UPS Express | 2020 |2day| 14.99

Mon | 2019 | UPS Expedited | 2020 | Overnight | 24.99

有没有可以指出的建议、链接或教程？我四处寻找，找不到任何东西。

谢谢

4

2 回答 2

1

您必须自己重新格式化数据，最好是在您最初获取数据的 Angular 服务中。

假设运营商、shipTime 和价格数组的长度始终相等且按相应的顺序排列，则以下内容应该可以工作。

const newResp = [];
resp.forEach(promo => {
  promo.carrier.forEach((carrier, i) => {
    const shipTime = promo.shipTime[i];
    const price = promo.price[i];
    newResp.push({ ...promo, carrier, shipTime, price });
  });
});
return newResp;

此代码正在为每个促销活动中的每个承运人在 newResp 列表中创建一个新条目。如果促销没有任何运营商，则不会为该促销创建条目。

于 2019-04-10T16:12:39.707 回答
1

假设carrier price和shipTime具有相同的长度。现在您可以循环modifiedInput显示在表格中。

const input = [{
  "promo": "Mon",
  "start": "2019",
  "carrier": ['UPS Ground', 'UPS Express', 'UPS Expedited'],
  "end": "2020",
  "shipTime": ['10', '2Day', 'Overnight'],
  "price": ['0.0', '14.99', '24.99']
},{
  "promo": "Tue",
  "start": "2019",
  "carrier": 'UPS Ground',
  "end": "2020",
  "shipTime": 'Overnight',
  "price": '14.99'
}];

const modifiedInput = input.reduce((output, item) => {
  if(item.carrier instanceof Array) {
    item.carrier.forEach((carrier, index) => {
      output.push({
        ...item,
        carrier,
        shipTime: item.shipTime[index],
        price: item.price[index]
      });
    });
  } else {
    output.push(item);
  }

  return output;
}, []);

console.log(modifiedInput);
.as-console-wrapper {
  max-height: 100% !important;
}

于 2019-04-10T16:21:51.957 回答