ionic Angular ngModel：内部数组的 ngFor 循环

Question

我有一个看起来像这样的对象：

const members = {
    pokiuy45 : {
        details:{
            fullname: 'Member 1',
            age: 58
        },
        contributions:{
            100: [
                {
                    date: 'date1',
                    amount: 500
                }
            ],
            200:[
                {
                    date: 'date1',
                    amount: 600
                },
                {
                    date: 'date2',
                    amount: 400
                },
                {
                    date: 'date3',
                    amount: 200
                }
            ]
        },
        stats: {
            total_points: 563,
            balance: 63,
            comments: 'random text'
        }
    },

    LoghnfLM : {
        details:{
            fullname: 'Second memeber',
            age: 31
        },
        contributions:{
            100: [
                {
                    date: 'date1',
                    amount: 100
                },
                {
                    date: 'date2',
                    amount: 300
                },
                {
                    date: 'date3',
                    amount: 200
                }
            ],
            200:[
                {
                    date: 'date1',
                    amount: 200
                },
                {
                    date: 'date2',
                    amount: 1000
                }
            ]
        },
        stats: {
            total_points: 587,
            balance: 420,
            comments: 'random text'
        }
    }
}

标签pokiuy45和LoghnfLM代表会员ID。每个成员都有一个子对象来显示详细信息（例如全名和年龄，然后是 100 和 200 池中的贡献数组。（实际上，池可能更多，每个成员可能有一个或每个池中的更多贡献）。
我想在一个元素中显示每个贡献，每个项目显示每个贡献的名称、年龄、日期和金额。

最终目标是让列表看起来像这样...

据我所知，ngFor 仅用于数组。那么我怎样才能做到这一点呢？我不知道从哪里开始。

Answer 1

只需将您的对象转换为数组即可：

this.membersArray = Object.entries(this.members).map(([key, value]) => {
  value.memberName = key;
  return value;
});

之后，您可以将它与 *ngFor 循环一起使用。

将脚本付诸行动：

const members = {
    pokiuy45 : {
        details:{
            fullname: 'Member 1',
            age: 58
        },
        contributions:{
            100: [
                {
                    date: 'date1',
                    amount: 500
                }
            ],
            200:[
                {
                    date: 'date1',
                    amount: 600
                },
                {
                    date: 'date2',
                    amount: 400
                },
                {
                    date: 'date3',
                    amount: 200
                }
            ]
        },
        stats: {
            total_points: 563,
            balance: 63,
            comments: 'random text'
        }
    },

    LoghnfLM : {
        details:{
            fullname: 'Second memeber',
            age: 31
        },
        contributions:{
            100: [
                {
                    date: 'date1',
                    amount: 100
                },
                {
                    date: 'date2',
                    amount: 300
                },
                {
                    date: 'date3',
                    amount: 200
                }
            ],
            200:[
                {
                    date: 'date1',
                    amount: 200
                },
                {
                    date: 'date2',
                    amount: 1000
                }
            ]
        },
        stats: {
            total_points: 587,
            balance: 420,
            comments: 'random text'
        }
    }
}

const membersArray = Object.entries(members).map(([key, value]) => {
  value.memberName = key;
  return value;
});

console.log(membersArray);

编辑

对于您提供的HTML（无样式）：

<div *ngFor="let member of membersArray">
  <div *ngFor="let contribution of member.contributions">
    <div>{{ member.memberName }}</div>
    <div>
      <span>{{ member.details.fullName }}</span>
      <span>contribution: {{ contribution.contributionName }}</span>
      <span>{{ contribution.date }}</span>
    </div>
    <div>
      <span>Amount: {{ contribution.amount }}</span>
    </div>
  </div>
</div>

请注意，您还必须解析并展平您的贡献才能使其正常工作：

const members = {
    pokiuy45 : {
        details:{
            fullname: 'Member 1',
            age: 58
        },
        contributions:{
            100: [
                {
                    date: 'date1',
                    amount: 500
                }
            ],
            200:[
                {
                    date: 'date1',
                    amount: 600
                },
                {
                    date: 'date2',
                    amount: 400
                },
                {
                    date: 'date3',
                    amount: 200
                }
            ]
        },
        stats: {
            total_points: 563,
            balance: 63,
            comments: 'random text'
        }
    },

    LoghnfLM : {
        details:{
            fullname: 'Second memeber',
            age: 31
        },
        contributions:{
            100: [
                {
                    date: 'date1',
                    amount: 100
                },
                {
                    date: 'date2',
                    amount: 300
                },
                {
                    date: 'date3',
                    amount: 200
                }
            ],
            200:[
                {
                    date: 'date1',
                    amount: 200
                },
                {
                    date: 'date2',
                    amount: 1000
                }
            ]
        },
        stats: {
            total_points: 587,
            balance: 420,
            comments: 'random text'
        }
    }
}

const membersArray = Object.entries(members).map(([key, value]) => {
  value.memberName = key;
  value.contributions = Array
    .prototype
    .concat
    .apply(
      [], 
      Object
        .entries(value.contributions)
        .map(([cKey, cValue]) => {
          cValue.forEach(v => v.contributionName = cKey);
          return cValue;
        })
    );
  return value;
});

console.log(membersArray);

ionic Angular ngModel：内部数组的 ngFor 循环

ionic Angular ngModel: ngFor loop for inner arrays

angular

ionic3

javascript-objects

ngfor

编辑