ionc组件封装动态多级展开折叠

数据
this.listOfMapData = {
“companyName”: “新余市仙来红酿酒有限公司”,
“properties”: 2,
“purchaseNumber”: null,
“salesNumber”: 2,
“surplusNumber”: 121,
“productionNumber”: 123,
“number”: 2,
“companyId”: 4572,
“pid”: null,
“id”: 1216,
“unitOfMeasurement”: “千克(kg)”,
“children”: [
{
“companyName”: “新余市第七中学食堂”,
“properties”: 3,
“purchaseNumber”: 1,
“salesNumber”: 0,
“surplusNumber”: 1,
“productionNumber”: null,
“number”: 1,
“companyId”: 15887,
“pid”: 1216,
“id”: 0,
“unitOfMeasurement”: “千克(kg)”,
“children”: [
{
“companyName”: “新余市第七中学食堂”,
“properties”: 3,
“purchaseNumber”: 1,
“salesNumber”: 0,
“surplusNumber”: 1,
“productionNumber”: null,
“number”: 1,
“companyId”: 15887,
“pid”: 1216,
“id”: 0,
“unitOfMeasurement”: “千克(kg)”,
“children”: []
},
{
“companyName”: “新余市第七中学食堂”,
“properties”: 3,
“purchaseNumber”: 1,
“salesNumber”: 0,
“surplusNumber”: 1,
“productionNumber”: null,
“number”: 1,
“companyId”: 15887,
“pid”: 1216,
“id”: 0,
“unitOfMeasurement”: “千克(kg)”,
“children”: []
}
]
},
{
“companyName”: “新余市第七中学食堂”,
“properties”: 3,
“purchaseNumber”: 1,
“salesNumber”: 0,
“surplusNumber”: 1,
“productionNumber”: null,
“number”: 1,
“companyId”: 15887,
“pid”: 1216,
“id”: 0,
“unitOfMeasurement”: “千克(kg)”,
“children”: [
{
“companyName”: “新余市第七中学食堂”,
“properties”: 3,
“purchaseNumber”: 1,
“salesNumber”: 0,
“surplusNumber”: 1,
“productionNumber”: null,
“number”: 1,
“companyId”: 15887,
“pid”: 1216,
“id”: 0,
“unitOfMeasurement”: “千克(kg)”,
“children”: [
{
“companyName”: “新余市第七中学食堂”,
“properties”: 3,
“purchaseNumber”: 1,
“salesNumber”: 0,
“surplusNumber”: 1,
“productionNumber”: null,
“number”: 1,
“companyId”: 15887,
“pid”: 1216,
“id”: 0,
“unitOfMeasurement”: “千克(kg)”,
“children”: [
{
“companyName”: “新余市第七中学食堂”,
“properties”: 3,
“purchaseNumber”: 1,
“salesNumber”: 0,
“surplusNumber”: 1,
“productionNumber”: null,
“number”: 1,
“companyId”: 15887,
“pid”: 1216,
“id”: 0,
“unitOfMeasurement”: “千克(kg)”,
“children”: []
},
{
“companyName”: “新余市第七中学食堂”,
“properties”: 3,
“purchaseNumber”: 1,
“salesNumber”: 0,
“surplusNumber”: 1,
“productionNumber”: null,
“number”: 1,
“companyId”: 15887,
“pid”: 1216,
“id”: 0,
“unitOfMeasurement”: “千克(kg)”,
“children”: []
}
]
},
]
},
{
“companyName”: “新余市第七中学食堂”,
“properties”: 3,
“purchaseNumber”: 1,
“salesNumber”: 0,
“surplusNumber”: 1,
“productionNumber”: null,
“number”: 1,
“companyId”: 15887,
“pid”: 1216,
“id”: 0,
“unitOfMeasurement”: “千克(kg)”,
“children”: [
{
“companyName”: “新余市第七中学食堂”,
“properties”: 3,
“purchaseNumber”: 1,
“salesNumber”: 0,
“surplusNumber”: 1,
“productionNumber”: null,
“number”: 1,
“companyId”: 15887,
“pid”: 1216,
“id”: 0,
“unitOfMeasurement”: “千克(kg)”,
“children”: [
{
“companyName”: “新余市第七中学食堂”,
“properties”: 3,
“purchaseNumber”: 1,
“salesNumber”: 0,
“surplusNumber”: 1,
“productionNumber”: null,
“number”: 1,
“companyId”: 15887,
“pid”: 1216,
“id”: 0,
“unitOfMeasurement”: “千克(kg)”,
“children”: []
},
{
“companyName”: “新余市第七中学食堂”,
“properties”: 3,
“purchaseNumber”: 1,
“salesNumber”: 0,
“surplusNumber”: 1,
“productionNumber”: null,
“number”: 1,
“companyId”: 15887,
“pid”: 1216,
“id”: 0,
“unitOfMeasurement”: “千克(kg)”,
“children”: [
{
“companyName”: “新余市第七中学食堂”,
“properties”: 3,
“purchaseNumber”: 1,
“salesNumber”: 0,
“surplusNumber”: 1,
“productionNumber”: null,
“number”: 1,
“companyId”: 15887,
“pid”: 1216,
“id”: 0,
“unitOfMeasurement”: “千克(kg)”,
“children”: [
{
“companyName”: “新余市第七中学食堂”,
“properties”: 3,
“purchaseNumber”: 1,
“salesNumber”: 0,
“surplusNumber”: 1,
“productionNumber”: null,
“number”: 1,
“companyId”: 15887,
“pid”: 1216,
“id”: 0,
“unitOfMeasurement”: “千克(kg)”,
“children”: []
},
{
“companyName”: “新余市第七中学食堂”,
“properties”: 3,
“purchaseNumber”: 1,
“salesNumber”: 0,
“surplusNumber”: 1,
“productionNumber”: null,
“number”: 1,
“companyId”: 15887,
“pid”: 1216,
“id”: 0,
“unitOfMeasurement”: “千克(kg)”,
“children”: []
}
]
},
]
}
]
},
]
}
]
}
]
}
html
<app-item-view [item]=“listOfMapData” >

组件

declarations和exports 都要引入你创建的组件

组件html
下面展示一些 内联代码片。

<div style="background: #fff; padding: 0.1rem 0.1rem; margin: 0 0.5rem;">
  <div style="margin: 0.5rem 0;">
   &nbsp;&nbsp; <span class="ion_span thirdTitle" *ngIf="item?.properties === 2">生产</span>
    <span class="ion_sales thirdTitle" *ngIf="item?.properties === 1">销售</span>
    <span class="ion_catering thirdTitle" *ngIf="item?.properties === 3">餐饮</span>&nbsp;&nbsp;
    <ion-text class="secondTitle" (click)="onLink(item)">{{ item?.companyName }}</ion-text>
    <span *ngIf="isFolder">  
      <ion-icon name="ios-arrow-down" *ngIf=" open === true"  style="vertical-align: middle;"  (click)="toggle()"></ion-icon>
      <ion-icon name="ios-arrow-forward" *ngIf="open === false" style="vertical-align: middle;" (click)="toggle()"></ion-icon>
    </span>
  </div>
  <div *ngIf="isFolder && open">
    <app-item-view *ngFor="let it of item.children;let i = index" [item]="it" [i]="i" [parent]="item" class="item"></app-item-view>
  </div>
</div>

ts
/**

• 是否展开
  */
  public isShow;

private open: boolean = false;

@Input() item: any;

@Input() i: any;

@Input() parent: any;

/**

• 识别是否有下级
  */
  isFolder() {
  return this.item.children && this.item.children.length;
  }

/**

• 展开子菜单
  */
  toggle() {
  if (this.isFolder) {
  this.open = !this.open;
  }
  }

注意还需要在你需要用到的地方引入你的 components.module.ts 文件