angular实战（1）

angular折叠面板的使用

  <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="null">
    <nz-collapseset>
      <nz-collapse *ngFor="let panel of panels" [nzTitle]="panel.title" [nzActive]="panel.active"
                   [nzDisabled]="panel.disabled">
        <nz-input [(ngModel)]="inputValue" [nzPlaceHolder]="'Basic usage'" (ngModelChange)="search(searchBox.sTitle)"></nz-input>
        <ul *ngIf="panel.lmain">
          <li *ngFor="let child of panel.lmain"  [routerLink]="child.object">{{child.slpos}}{{child.sTitle}}[{{child.sname}}]</li>
        </ul>
      </nz-collapse>
    </nz-collapseset>
  </nz-sider>

ts

从后端接口获取这样的数据，json格式，然后展示，可以先用假数据

export class DictObjectComponent implements OnInit {
  // panels:any[]=[{title:"基础信息",lmain:
  //   [
  //   {content1:"00",content2:"工作报告",content3:"workrpt"},
  //   {content1:"01",content2:"工作报告1",content3:"workrpt1"}
  // ]},
  //   {title:"其他信息", lmain:
  //     [
  //     {content1:"00",content2:"工作报告",content3:"workrpt",},
  //   {content1:"01",content2:"工作报告1",content3:"workrpt1"}
  //   ]
  // }]
  panels:any[]
  constructor(private developService:DevelopService) { }
  private searchTerms = new Subject<string>();
  ngOnInit() {
    this.developService.getDictObjectMap()
      .then(data=>{
        console.log(data);
        this.panels=data
      })
  }
  search(term: string): void {
    this.searchTerms.next(term);
  }

}