Estoy creando una página de preguntas frecuentes con botones de acordeón, con grupos de botones debajo de subtítulos. Lo diseñé usando una instrucción ngFor en el archivo faq.html.
<h1>Frequently Asked Questions</h1> <div *ngFor="let item of data; let i = index;"> <button class="accordion" (click)="toggleAccordion($event, i)"> {{item.parentName}} </button> <div class="panel" *ngFor="let child of item.childProperties" hide="!item.isActive"> <p> {{child.propertyName}} </p> </div>Aquí hay un fragmento del archivo faq.ts.
import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-faq', templateUrl: './faq.html', styleUrls: ['./faq.scss'] }) export class FaqComponent implements OnInit { data: any = [ { parentName: 'Question 1A', childProperties: [{ propertyName: 'Answer 1A' }], }, { parentName: 'Question 2A', childProperties: [{ propertyName: 'Answer 2A' }], }, { parentName: 'Question 3A', childProperties: [{ propertyName: 'Answer 3A' }], }, { parentName: 'Question 1B', childProperties: [{ propertyName: 'Answer 1B' }], }, { parentName: 'Question 2B', childProperties: [{ propertyName: 'Answer 2B' }], }, ]; }Quiero colocar subtítulos sobre la Sección A (Preguntas 1A, 2A y 3A) y la Sección B (Preguntas 1B y 2B). Creo que puedo usar slice en la declaración ngFor en faq.html, pero el código no se compilará.
Probé este tubo de corte:
<div *ngFor="let item of data | slice:0:2; let i = index;">¿Qué debo cambiar para que compile y divida las secciones de preguntas frecuentes? ¿Es el tubo de corte el camino a seguir?
Tuve que cambiar el html para acceder a las propiedades de otra manera y se compiló:
<div *ngFor="let item of data; let i = index;"> <button class="accordion" (click)="toggleAccordion($event, i)"> {{item['parentName']}} </button> <div class="panel" *ngFor="let child of item['childProperties'] | slice:0:2; let i = index;" hide="!item.isActive"> <p> {{child['propertyName']}} </p> </div> El problema aquí es que la tubería de corte devuelve sus datos como tipo unknown . Hay un par de maneras de evitar esto:
<p *ngFor="let item of data | slice:2:4"> {{ $any(item).parentName }} </p> <p *ngFor="let item of data | slice:2:4"> {{ item['parentName'] }} </p> slicedData(data : any[]) : any[] { return data.slice(2,4) } <p *ngFor="let item of slicedData(data)"> {{ item['parentName'] }} </p>Sin embargo, es posible que desee escribir correctamente sus datos, en lugar de usar cualquiera. Después de todo, se llama Typescript por una razón.
Aquí hay algunos ejemplos en un Stackblitz .
Simplemente puede agregar un *ngIf y verificar si i < 3 :
<h1>Frequently Asked Questions</h1> <div *ngFor="let item of data; let i = index;"> <ng-container *ngIf="i < 3"> <button class="accordion" (click)="toggleAccordion($event, i)"> {{item.parentName}} </button> <div class="panel" *ngFor="let child of item.childProperties" hide="!item.isActive"> <p> {{child.propertyName}} </p> </ng-container> </div>Gracias por su ayuda a todos ustedes. Cambié faq.html a:
<h1>Frequently Asked Questions</h1> <h2>General</h2> <div *ngFor="let item of data; let i = index;"> <ng-container *ngIf="i < 3"> <button class="accordion" (click)="toggleAccordion($event, i)"> {{item.parentName}} </button> <div class="panel" hide="!item.isActive"> <p> {{item.childName}} </p> </div>Y funcionó.