I want customize contents collapse but i can not just content 1 in collapse 1 and content 2 in collapse 2 and want create collapse and set contents with below example. and project is angular 12. and can not find the answer in document

example

and how I can implement item 2 (collapse 2) event click edit and delete?

collapse.component.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
    }
    ];

collapse.component.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>