使用 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

将数据过滤到可以迭代的 2 个单独列表中

 const data = [{age:"29",data1:"section1"},{age:"30",data1:"section2"},{age:"22",data1:"section1"},{age:"32",data1:"section2"}]; const section1data = data.filter(x => x.data1 === "section1"); const section2data = data.filter(x => x.data1 === "section2");

 <div> <ng-container *ngFor="let data of section1data"> <p>Section 1</p> <h1>{{data.age}}</h1> </ng-container> <ng-container *ngFor="let data of section2data"> <p>Section 2</p> <h1>{{data.age}}</h1> </ng-container> </div>

Answer 2

最简单的方法是制作两个 *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 弹性订单“玩”

<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 3

您可以尝试如下。

组件.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;
    }, {});
  }

  mySortingFunction = (a, b) => {
    return a.key > b.key ? -1 : 1;
  };
}

组件.html

<div *ngFor="let item of sortedData | keyvalue: mySortingFunction">
  <h2>{{ item.key }}</h2>
  Key: <b>{{ item.key }}</b> and Value: <b>{{ item.value | json }}</b>
</div>

您也可以对sortedData进行排序。

工作演示

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