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);  }}