es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo puedo hacer un bucle sobre una porción de un arreglo utilizando ngFor?

22 Jul, 2023 Programación

Estoy creando una página de preguntas frecuentes con botones de acordeón, con grupos de botones bajo subencabezados. Lo diseñé utilizando una declaración “ngFor” en el archivo faq.html.

<h1>Preguntas frecuentes</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: 'Pregunta 1A',
      childProperties: [{ propertyName: 'Respuesta 1A' }],
    },
    {
      parentName: 'Pregunta 2A',
      childProperties: [{ propertyName: 'Respuesta 2A' }],
    },
    {
      parentName: 'Pregunta 3A',
      childProperties: [{ propertyName: 'Respuesta 3A' }],
    },
    {
      parentName: 'Pregunta 1B',
      childProperties: [{ propertyName: 'Respuesta 1B' }],
    },
    {
      parentName: 'Pregunta 2B',
      childProperties: [{ propertyName: 'Respuesta 2B' }],
    },
  ];
}

Quiero colocar subencabezados 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 compila.

Intenté usar este pipe “slice”:

<div *ngfor="let item of data | slice:0:2; let i = index;">

¿Qué debo cambiar para que se compile y se dividan las secciones de preguntas frecuentes? ¿Es el pipe “slice” la opción correcta?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para crear subencabezados para la Sección A y la Sección B, puedes utilizar la directiva ngIf y crear divs separados para cada sección con sus propios encabezados.

    <h1>Preguntas frecuentes</h1>

<!-- Sección A -->
<div *ngif="data.length > 0">
  <h2>Sección A</h2>
  <div *ngfor="let item of data; let i = index;">
      <div *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">
          {{child.propertyName}}
        </div>
      </div>
  </div>
</div>

<!-- Sección B -->
<div *ngif="data.length > 0">
  <h2>Sección B</h2>
  <div *ngfor="let item of data; let i = index;">
      <div *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">
          {{child.propertyName}}
        </div>
      </div>
  </div>
</div>

    Este código verifica si el arreglo de datos tiene una longitud mayor a 0, y luego crea dos divs separados para la Sección A y la Sección B utilizando ngIf. En cada div, se utiliza un bucle ngFor para iterar a través del arreglo de datos. La directiva ngIf se utiliza para verificar el índice del elemento actual en datos, y crear un subencabezado para la Sección A y la Sección B respectivamente.

    Usar slice en la declaración ngFor puede no funcionar en este caso porque no hay una manera directa de dividir el arreglo en base a un criterio específico, como separarlo en dos secciones.

Comments are closed.