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

Question

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

f

标签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代表成员ID。每个成员都有一个子对象来显示详细信息（例如，全名和年龄，然后是LoghnfLM和100的集合中的贡献数组。（实际上，可能有更多的集合，每个成员可能有一个或每个池中有更多贡献）。
我想在元素中显示每个贡献，每个项目都显示每个贡献的名称，年龄，日期和数量。

最终目标是要有一个像这样的列表...

据我所知，200仅用于数组。那么我该如何实现呢？我不知道从哪里开始。

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);