typescript - Làm thế nào để hiển thị mảng được nhóm trong Angular?

Tôi có một mảng các đối tượng như thế này

[
  {"desc":"a", "menu": 1},{"desc":"b", "menu": 2},{"desc":"c", "menu": 1}, 
  {"desc":"d", "menu": 3},{"desc":"e", "menu": 3},{"desc":"f", "menu": 2}, 
  {"desc":"g", "menu": 1},{"desc":"g", "menu": 1},{"desc":"g", "menu": 4}, 
  {"desc":"g", "menu": 4},{"desc":"g", "menu": 4}
]

Được lấy từ một API.

Bây giờ tôi sẽ chỉ rằng các đối tượng với *ngFor bằng cách đặt chúng được nhóm theo "menu" và thêm nhãn cho nó như thế này

Thực đơn 1

{tất cả các đối tượng của menu 1}

Thực đơn 2

{tất cả các đối tượng của menu 2}

Thực đơn 3

{tất cả các đối tượng của menu 3}

Tôi sẽ làm một việc gì đó như thế này trong *ngFor

*ngFor="let object of objects; let menu = 0"
     if menu !== object.menu
           menu === object.menu
       WRITE LABEL

Nhưng làm sao tôi có thể triển khai nó trong mã thực tế?

Câu trả lời #1

Tôi nghĩ chúng ta nên nhóm nó trước khi sử dụng *ngFor, đây là giải pháp

 function groupBy(array, fn) {
    return array.reduce(
      (acc, current) => {
        const groupName = typeof fn === 'string' ? current[fn] : fn(current);
        (acc[groupName] = acc[groupName] || []).push(current);
        return acc;
      },
      {}
    );
  }

 function toArray(obj) {
    return Object.keys(obj).map(k => obj[k]);
  }
  
  const data = [
  {"desc":"a", "menu": 1},{"desc":"b", "menu": 2},{"desc":"c", "menu": 1}, 
  {"desc":"d", "menu": 3},{"desc":"e", "menu": 3},{"desc":"f", "menu": 2}, 
  {"desc":"g", "menu": 1},{"desc":"g", "menu": 1},{"desc":"g", "menu": 4}, 
  {"desc":"g", "menu": 4},{"desc":"g", "menu": 4}
]

const groupMenu = groupBy(data, (item) => item.menu);

Sau đó trong mẫu

<group *ngFor="let group of groupMenu">
  <menu *ngFor="let menu of group">
   <label>{{menu.desc}}</label>
  </menu>
</group>

Câu trả lời #2

Bạn có thể sử dụng một cái gì đó như

ngOnInit(){
    var groups = new Set(this.array.map(item => item.menu))
    this.result = [];
    groups.forEach(g => 
      this.result.push({
        menu: g, 
        values: this.array.filter(i => i.menu === g)
      }
    ))
  }

và hiển thị dữ liệu trong HTML

<p>
    Start editing to see some magic happen :)
</p>
<div *ngFor="let item of result" border="1">
    <table>
        <tr>
            <th>Desc</th>
            <th>Menu</th>
        </tr>
        <ng-container>
            <tr>
                <td colspan="2">{{item.menu}}</td>
            </tr>
            <tr *ngFor="let value of item.values">
                <td>{{value.desc}}</td>
            </tr>
        </ng-container>
    </table>
    <div>

Vui lòng kiểm tra stackblitz mà tôi đã làm. https://stackblitz.com/edit/angular-4ekz4n

Chúc bạn lập trình vui vẻ :)