ионная угловая петля ngModel: ngFor для внутренних массивов - PullRequest
Новая
       15

ионная угловая петля ngModel: ngFor для внутренних массивов

0 голосов
/ 28 июня 2019

У меня есть объект, похожий на этот: 

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 представляют идентификаторы участников. У каждого участника есть подчиненный объект для представления подробностей (например, полное имя и возраст, затем массивы вкладов в пулах 100 и 200. (На самом деле, может быть больше пулов, и каждый участник может иметь один или несколько вкладов в каждый бассейн).
Я хотел бы отобразить каждый вклад в элемент, где каждый элемент отображает имя, возраст, дату и сумму каждого вклада.

Конечная цель - создать список, похожий на этот ...

enter image description here

Из того, что я знаю, ngFor используются только с массивами. Так как я могу сделать это? Я понятия не имею, с чего начать.

1 Ответ

0 голосов
/ 28 июня 2019

Просто преобразуйте ваш объект в массив: 

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

EDIT

Для предоставленного вами 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);
...