Question

我具有以下结构

[
  {
    "name": null
    "match": [{
                 "id": 0,
                 "location": ""

             "awayTeam": {
                     "id": 1568,
                     "teamName": "Manly United" },
                 "homeTeam": {
                     "id": 1523,
                     "teamName": "Sydney FC Youth" },
                     "matchDataProvider": [{
                            "id": 2953046,
                         "updatedDate": null }],
                 "matchPunditPrediction": [],
                 "matchResult": null,
                     "userMatchPrediction": []
               }]
   }
]

我需要遍历match元素并检索属性

Answer 1

您可以执行以下操作： arr =您的完整数组。

arr.forEach(obj => {
  obj.match.forEach(m => {
    // This contains the match object.
    console.log(m);
    console.log(m.id);
  })
})

对于html。

<div *ngFor="let item of myData">
  <div *ngFor="let match of item.match | json"> {{ match }} </div>
</div>

Answer 2

我有相同的数组结构。在普通的Java逻辑中，我们知道，我们可以通过迭代两次遍历循环来获取元素值。因此，我尝试执行相同的操作。确实不是我们的错，但是角度ngFor循环仅适用于适当的数组结构，当您迭代这种数组结构时会引发错误。

经过如此多的研究，我发现了一个黑客，

在您的组件文件中，编写以下代码。

float *pointer[10];// Array of 10 pointer to float

float *(pointer[10]); //bracket around array of 10 pointer to float, So same as above

int(*pointer_function)(); // function pointer to achieve callbacks

int * pointer_function(); // function to integer pointer

这将使一个数组接一个数组。魔术是，Angular认为这是正确的数组结构，之后不会出错。

现在，当您在html中编写ngFor时，只需这样编写即可。

hack(val) {
    return Array.from(val);
  }

在此之后，如果您需要为内部数组再次编写ngFor，您仍然可以现在编写:)。此hack可能会在您的代码平台中显示错误，但可以在浏览器中正常运行。

我希望这可以帮助您解决问题：）

在对象上迭代

2 个答案: