将地图转换为数组 - Angular 6 和 JHipster

Question

目标： 将我从服务器检索到的地图转换为数组，以使其出现在 HTML 中。事实上，我可以在论坛上看到地图不是 suitable *ngFor 结构指令。

尝试：

地图看起来像这样（实际上对象中也有对象，但我认为结果变化不大）：

{

"Mission 1":[ { "id": 1 "quantite":0 "date" : 2018-04-01 }, { "id": 2 "quantite":0 "date" : 2018-04-02 } ],

"Mission 2":[ { "id": 3 "quantite":0 "date" : 2018-04-01 }, { "id": 4 "quantite":0 "date" : 2018-04-02 } ]

}

我尝试使用此代码：

     this.mapToArray = Array.from(this.map);

问题： 地图找到了。但是，对于 mapToArray，它被设置为未定义，就像 Array.from(map) 没有发生任何事情一样。

你能帮帮我吗？

谢谢！

编辑编辑编辑编辑

嗨，

感谢您的回答。

首先，forEach() 等与地图相关的方法不起作用。我可能是错的，但根据我在研究过程中看到的情况，Map 接口在 TypeScript（Angular 5-6 中使用的语言）中不可用。我尝试了您建议的解决方案，但无法解决问题。

其次，我进步不大，但我还欠缺一些东西。如果您有任何想法：

TypeScript 端

export class DetailComponent implements OnInit, OnDestroy {



map: { [index:string], ArrayList:Details } = {};

valueMission: ArrayList<Details>;

constructor(private activatedRoute: ActivatedRoute) { }

ngOnInit() {

    this.activatedRoute.data.subscribe(({ details }) => {
        this.map = details;
        this.valueMission = this.map["Mission 1"];
    });

    }

HTML边

<p> {{valueMission[0].dayOfMonth}}</p>

所以这行得通。在我的 HTML table 中，显示了 dayOfMonth。现在，我需要做的是为键创建一个数组，以便能够为每个键创建一个相应的数组，如 valueMission，然后能够在 HTML 中显示它们。有什么线索吗？

谢谢，

马努

Answer 1

数据 {} 是一个对象，首先我建议您将其转换为数组并应用映射函数。在 map 函数中你必须做一个过滤函数，因为你有一个内部对象 missions

 var data = {

            "Mission 1": [{
                "id": 1,
                "quantite": 0,
                "date": 2018 - 04 - 01
            }, {
                "id": 2,
                "quantite": 0,
                "date": 2018 - 04 - 02
            }],

            "Mission 2": [{
                "id": 3,
                "quantite": 0,
                "date": 2018 - 04 - 01
            }, {
                "id": 4,
                "quantite": 0,
                "date": 2018 - 04 - 02
            }]

        };



    var anArray = [];
//push to an empty array if the data is an object to apply map function
            anArray.push(data)
            var data1 = anArray.map(function (item) {
                var items = [];
                Object.keys(item).forEach(function (key, index) {                        
                    item[key].forEach(function (inneritem, index) {
                        items.push(inneritem);
                    });
                });
                return items;
            });

            var allDatas = data1[0];

Answer 2

你可以做到：

var obj = {
      "Mission 1": [{
          "id": 1,
          "quantite": 0,
          "date": 2018 - 04 - 01
      }, {
          "id": 2,
          "quantite": 0,
          "date": 2018 - 04 - 02
      }],

      "Mission 2": [{
          "id": 3,
          "quantite": 0,
          "date": 2018 - 04 - 01
      }, {
          "id": 4,
          "quantite": 0,
          "date": 2018 - 04 - 02
      }]

     };
     
     var array = [];
     var i = 0;
     for (var mission in obj) {
       array[i] = array.concat(obj[mission]);
       i++;
     }
     
     console.log(array);

Answer 3

假设您的数据如下所示：

data = {

    "Mission 1":[ { "id": 1 "quantite":0 "date" : 2018-04-01 }, { "id": 2 "quantite":0 "date" : 2018-04-02 } ],

    "Mission 2":[ { "id": 3 "quantite":0 "date" : 2018-04-01 }, { "id": 4 "quantite":0 "date" : 2018-04-02 } ]

}

然后，您可以通过映射键来获取数据中所有项目的数组，即

let result = Object.keys(dataKey => {
   // here, dataKey will be -> "Mission 1", then "Mission 2" etc...
   // the value you return here will be used to form the elements of your array
   // so do whatever transformation you want to do here
   return data[dataKey];
});

result 将最终成为一个数组，如下所示：

[
   [ { "id": 1 "quantite":0 "date" : 2018-04-01 }, { "id": 2 "quantite":0 "date" : 2018-04-02 } ],
   [ { "id": 3 "quantite":0 "date" : 2018-04-01 }, { "id": 4 "quantite":0 "date" : 2018-04-02 } ]

]

当然，您不太可能需要数组的数组，因此在回调中，您可以将结果的每个元素转换为任何有意义的元素。因此，例如，如果不是数组数组，我可以通过执行以下操作将其展平为单个结果：

let result = Object.keys(dataKey => {
   // here, dataKey will be -> "Mission 1", then "Mission 2" etc...
   // in this case, i want the first data item of each 'mission'
   return data[dataKey][0];
});

和result将是：

 [
   { "id": 1 "quantite":0 "date" : 2018-04-01 },
   { "id": 3 "quantite":0 "date" : 2018-04-01 },
]

或另一个例子，

 let result2 = Object.keys(missionName => {
   // here, dataKey will be -> "Mission 1", then "Mission 2" etc...
   return {
       missionName: missionName,
       firstMission: data[missionName][0],
       missions: data[missionName],
   };
});

和 result2 看起来像：

[
 {
   missionName: "Mission 1",
   firstMission: { "id": 1 "quantite":0 "date" : 2018-04-01 },
   missions: [
    { "id": 1 "quantite":0 "date" : 2018-04-01 }, 
    { "id": 2 "quantite":0 "date" : 2018-04-02 }
   ],
 }, 
 {
   missionName: "Mission 2", 
   ....
 }
]

等等。实际上，该回调中发生的一切都取决于您希望最终结果是什么样子。

Answer 4

感谢大家的评论。他们每个人都帮助了我。我解决了我的问题。

一种解法：

 this.activatedRoute.data.subscribe(({ details }) => {
        this.map = details;

        const keysOfMap = Object.keys(details);

        const arrayOfArrays: ArrayList = [];

        for (let keyOfMap in keysOfMap){

            const valueMission = this.map[keysOfMap[keyOfMap]];

            arrayOfArrays.push(valueMission);
        }

        this.arrayOfArrays = arrayOfArrays;
        this.keysOfMap = keysOfMap;
    });

然后可以将这两个数组视为 HTML 视图中的任何数组。

再次感谢您的宝贵时间！

将地图转换为数组 - Angular 6 和 JHipster

Convert a map to an array - Angular 6 and JHipster

jhipster

angular