ng-zorro列表

angular之ng-container 、ng-template的使用 - 简书

import { Component } from "@angular/core";

import { NzMessageService } from "ng-zorro-antd/message";

@Component({

  selector: "nz-demo-list-simple",

  template: `

    <h3 [ngStyle]="{ margin: '16px 0' }">Large Size</h3>

    <nz-list [nzDataSource]="data" [nzRenderItem]="item1">

      <ng-template #item1 let-item>

        <div style="border:1px solid #ccc;overflow:auto;margin-top:10px">

          <nz-form-label [nzSpan]="2">姓名</nz-form-label>

          <nz-form-control [nzSpan]="3">{{ item.name }}</nz-form-control>

          <nz-form-label [nzSpan]="2">年龄</nz-form-label>

          <nz-form-control [nzSpan]="3">{{ item.age }}</nz-form-control>

        </div>

      </ng-template>

    </nz-list>

  `

  ]

})

export class NzDemoListSimpleComponent {

  data = [{ name: "aaa", age: "20" }, { name: "bbb", age: "22" }];

  constructor(public msg: NzMessageService) {}

}