使用 ngFor 在同一数组的两个不同位置显示数据 Angular

Question

我有一个数组，我需要使用 *ngFor 在两个不同的部分显示其数据。就像我有两个部分：第 1 部分和第 2 部分。从下面的数组中，我需要显示在第一个标签内具有值 section1 的键和在第二个标签内具有值为 section2 的键。我已经尝试了很多但无法做到，Angular 相当新。请帮忙！注意：我不能使用两个不同的变量，然后在 ts 文件中将其过滤掉，然后在我的 *ngFor.

中使用这两个变量

arr=[{age:"29",data1:"section1"},{age:"30",data1:"section2"},{age:"22",data1:"section1"},{age:"32",data1:"section2"}]

HTML Code: 
<div *ngFor="let data of arr;">
<p>Section 1</p>
<h1>{{data.age}}</h1>

<p>Section 2</p>
<h1>{{data.age}}</h1>
</div>

Answer 1

最简单的方法是做两个 *ngFor。如果你不能“重复”“内部html”

，你可以使用*ngTemplateOutlet

<div>Section 1</div>
<div *ngFor="let item of arr">
  <ng-container *ngIf="item.data1 == 'section1'">
    <ng-container
      *ngTemplateOutlet="template; context: { $implicit: item }"
    ></ng-container>
  </ng-container>
</div>
<div>Section 2</div>
<div *ngFor="let item of arr">
  <ng-container *ngIf="item.data1 == 'section2'">
    <ng-container
      *ngTemplateOutlet="template; context: { $implicit: item }"
    ></ng-container>
  </ng-container>
</div>
<ng-template #template let-item>
  {{ item | json }}
</ng-template>

如果你只想要一个独特的循环，你需要用css flex order

“玩”

<div class="wrapper">
  <div [style.order]="0">Section 1</div>
  <div [style.order]="1000">Section 2</div>
  <div
    *ngFor="let item of arr; let i = index"
    [style.order]="item.data1 == 'section2' ? 1000 + i : 1 + i"
  >
    {{ item | json }}
  </div>
</div>

哪里

.wrapper{
  display:flex;
  flex-direction: column;
}

你可以在这个stackbliz

中看到两种方法

Answer 2

你可以试试下面的方法。

component.ts

import { Component, OnInit, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  name = 'Angular ' + VERSION.major;
  arr = [
    { age: '29', data1: 'section1' },
    { age: '30', data1: 'section2' },
    { age: '22', data1: 'section1' },
    { age: '32', data1: 'section2' },
  ];

  sortedData;

  constructor() {}

  ngOnInit() {
    this.sortedData = this.arr.reduce((acc, curr) => {
      if (acc.hasOwnProperty(curr.data1)) {
        acc[curr.data1].push(curr);
        return acc;
      }

      acc[curr.data1] = [curr];
      return acc;
    }, {});
  }

}

component.html

<div *ngFor="let item of sortedData | keyValue">
  <h2>{{ item.key }}</h2>

  <div *ngFor="let obj of item.value">{{ obj.age }}</div>
</div>

key-value 管道

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'keyValue',
})
export class KeyValuePipe implements PipeTransform {
  transform(input: any): any {
    let keys = [];
    for (let key in input) {
      if (input.hasOwnProperty(key)) {
        keys.push({ key: key, value: input[key] });
      }
    }
    return keys;
  }
}

更新代码。

Working Demo

如果您有任何问题，请告诉我。

使用 ngFor 在同一数组的两个不同位置显示数据 Angular

Use ngFor for showing data in two different places from same Array Angular

javascript

angular

angular6