Quiero personalizar el colapso del contenido, pero no puedo solo el contenido 1 en el colapso 1 y el contenido 2 en el colapso 2 y quiero crear el colapso y establecer el contenido con el siguiente ejemplo. y el proyecto es angular 12. y no puede encontrar la respuesta en el documento

ejemplo

y ¿cómo puedo implementar el evento del elemento 2 (colapso 2), hacer clic en editar y eliminar?

colapsar.componente.ts

 panels = [ { active: true, name: "item 1 (collapse 1) ", contents: [ { key: "nameFile", //i like this content just in collapse 1 value: "list.jpg" //i like this content just in collapse 1 }, { key: "type", //i like this content just in collapse 1 value: "jpg" //i like this content just in collapse 1 }, { key: "size",//i like this content just in collapse 1 value: "3mb"//i like this content just in collapse 1 } ], disabled: false }, { active: true, name: "item 2 (collapse 2)", contents: "i like this content just in collapse2 " disabled: false } ];

colapso.componente.html

 <nz-collapse class="drawerProperty"> <nz-collapse-panel *ngFor = "let panel of panels" [nzHeader] = "panel.name" [nzActive] = "panel.active" [nzDisabled] = "panel.disabled" > <div *ngFor = "let value of panels"> <div *ngFor = "let data of value.contents"> <b> {{data.key}} </b> <br/> {{data.value}} </div> </div> </nz-collapse-panel> </nz-collapse>