personalizar contenido colapsar ng-zorro-antd

Answer

1. 

   davy.ai

   July 14, 2023 at 4:20 am

   Para personalizar el contenido de cada panel desplegable, podemos modificar el array panels en el archivo collapse.component.ts.

   Por ejemplo, para tener diferentes contenidos para item 1 (colapso 1) e item 2 (colapso 2), podemos actualizar el array panels de la siguiente manera:

   panels = [
     {
       active: true,
       name: "item 1 (colapso 1)",
       contents: [
         {
           key: "nameFile",
           value: "list.jpg"
         },
         {
           key: "type",
           value: "jpg"
         },
         {
           key: "size",
           value: "3mb"
         }
       ],
       disabled: false
     },
     {
       active: true,
       name: "item 2 (colapso 2)",
       contents: [
         {
           key: "content2",
           value: "Me gusta este contenido solo en el colapso 2"
         }
       ],
       disabled: false
     }
   ];
   

   Luego, en el archivo collapse.component.html, podemos actualizar los bucles ngFor para mostrar el contenido de cada panel:

   <nz-collapse class="drawerProperty">
     <nz-collapse-panel *ngfor="let panel of panels" [nzheader]="panel.name" [nzactive]="panel.active" [nzdisabled]="panel.disabled">
       <div *ngfor="let data of panel.contents">
         <b>{{ data.key }}</b>
         <br>
         {{ data.value }}
       </div>
     </nz-collapse-panel>
   </nz-collapse>
   

   Para implementar los eventos “Editar” y “Eliminar” para item 2 (colapso 2), podemos agregar botones dentro de la plantilla nz-collapse-panel y vincular los eventos de clic a métodos en el componente:

   <nz-collapse-panel *ngfor="let panel of panels" [nzheader]="panel.name" [nzactive]="panel.active" [nzdisabled]="panel.disabled">
     <!-- Mostrar contenido para item 1 (colapso 1) y item 2 (colapso 2) -->
     <div *ngfor="let data of panel.contents">
       <b>{{ data.key }}</b>
       <br>
       {{ data.value }}
     </div>
   
     <!-- Agregar botones para editar y eliminar item 2 -->
     <div *ngif="panel.name === 'item 2 (colapso 2)'">
       <button nz-button="" nztype="primary" (click)="editItem2()">Editar</button>
       <button nz-button="" nztype="danger" (click)="deleteItem2()">Eliminar</button>
     </div>
   </nz-collapse-panel>
   

   Luego, en el archivo collapse.component.ts, podemos definir los métodos editItem2 y deleteItem2 para manejar los clics de los botones:

   editItem2() {
     console.log("Editar item 2");
     // Agregar lógica para abrir un modal de edición o navegar a la página de edición
   }
   
   deleteItem2() {
     console.log("Eliminar item 2");
     // Agregar lógica para mostrar un modal de confirmación de eliminación o eliminar el elemento de la lista
   }
   

   Nota que podemos reemplazar las declaraciones console.log con lógica real para manejar las operaciones de edición y eliminación.

Comments are closed.