按Angular中的对象属性分组元素

问题描述 投票:0回答:2

在Ionic 4(Angular)中,我想为项目的每个唯一'type'属性创建一个div,并在上述div下添加所有具有相同'type'的元素。

例如,我要输出以下数组:

items = [
      {
        type: 'type1',
        question: 'question1',
        answer: 'answer1'
      },
      {
        type: 'type2',
        question: 'question2',
        answer: 'answer2'
      },
      {
        type: 'type2',
        question: 'question3',
        answer: 'answer3'
      },
      {
        type: 'type3',
        question: 'question4',
        answer: 'answer4'
      },
    ];

是这样:

<div id="type1">
   <div class="item">
       <h1>question1</h1>
       <div>answer1</div> 
   </div>
</div>

<div id="type2">
   <div class="item">
       <h1>question2</h1>
       <div>answer2</div> 
   </div>

   <div class="item">
       <h1>question3</h1>
       <div>answer3</div> 
   </div>
</div>

<div id="type3">
   <div class="item">
       <h1>question4</h1>
       <div>answer4</div> 
   </div>
</div>

angular typescript ionic-framework
2个回答
0
投票

您可以使用此:

groupBy(list, property) {
        return list.reduce((groups, item) => {
            const val = item[property];
            groups[val] = groups[val] || [];
            groups[val].push(item);
            return groups;
        }, {});
    }

0
投票

首先,您应该按类型对数据进行分组:

groupByType(array){
    return array.reduce((r, a) => {
          r[a.type] = r[a.type] || [];
          r[a.type].push(a);
          return r;
      }, Object.create(null));
  }

然后尝试使用键值管道显示您的数据:

<div *ngFor="let item of newItems | keyvalue">
  <div id="{{item.key}}">
    {{item.key}}
    <div class="item" *ngFor="let value of item.value">
      <div>{{value.question}}</div>
      <div>{{value.answer}}</div>
      <br>
    </div>
</div>
</div>

检查DEMO

© www.soinside.com 2019 - 2024. All rights reserved.