Tengo una sola matriz cuyos datos necesito mostrar en dos secciones diferentes usando *ngFor. Como si tuviera dos secciones: la Sección 1 y la Sección 2. De la matriz a continuación, necesito mostrar las claves que tienen valores de la sección 1 dentro de la primera etiqueta y las que tienen valores como la sección 2 dentro de la segunda etiqueta. He intentado mucho pero no he podido hacerlo, considerablemente nuevo con Angular. ¡Por favor ayuda! Nota: No puedo usar dos variables diferentes y luego filtrarlas en el archivo ts y luego usar esas 2 variables dentro de mi * 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>La manera fácil si haces dos * ngFor. Puede usar * ngTemplateOutlet si no puede "repetir" el "html interno"
<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>Si solo desea un bucle único, necesita "reproducir" con 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>dónde
.wrapper{ display:flex; flex-direction: column; }Puedes ver los dos enfoques en este stackbliz
Puedes probar como a continuación.
componente.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; }, {}); } }componente.html
<div *ngFor="let item of sortedData | keyValue"> <h2>{{ item.key }}</h2> <div *ngFor="let obj of item.value">{{ obj.age }}</div> </div>tubo clave-valor
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; } }Código actualizado.
Avísame si tienes algún problema.