ST 表格之下拉框

最新推荐文章于 2023-09-07 09:00:32 发布

原创最新推荐文章于 2023-09-07 09:00:32 发布 · 405 阅读

0 ·

CC 4.0 BY-SA版权

ng-alain 专栏收录该内容

10 篇文章

订阅专栏

本文探讨了如何在HTML中使用Angular与TypeScript实现动态数据绑定，包括使用自定义变量、下拉框绑定及自定义模板渲染。通过具体代码示例，展示了如何在表格中动态显示数据，以及如何利用TypeScript处理和展示复杂数据结构。

html 中增加ng模板以 st-fow命名以备绑定

let-index=“index” 是循环中的自定义变量，从0开始计数，正好用于取出绑定的数据和下拉框绑定

 <st #st [data]="noticedata" [columns]="columns"   (change)="change($event)" >
            <ng-template  st-row="custom" let-item let-index="index" let-column="column">
              <nz-select disabled   nz-input [ngModel]="noticedata[index].userId" nzPlaceHolder="选择用户" name="userId" >
                <nz-option *ngFor="let data of TeacherData" nzLabel="{{data.userName}}" [nzValue]="data.userId"></nz-option>
              </nz-select>
            </ng-template>
          </st>

ts中通过render绑定

reder ：自定html输入到这个列表中

  columns: STColumn[] = [
    { title: 'ID', index: 'noticeId' },
    { title: '标题', index: 'noticeTitle' },
 //   { title: '内容', index: 'noticeInfo.substr(0,100)' },
    { title: '类型', index: 'noticeType' },
    { title: '发布状态', index: 'status' },
    { title: '发布用户', index: 'userId',render:'custom' },
    {
      title: '内容',
      buttons: [
        {
      //    text: ' 点击查看',
          format: item => item.noticeInfo ? '点击查看' : '无内容',
          click: (item: any) => item.noticeInfo ? this.view(item.noticeInfo) : '',
        }],
    },
    { title: '创建时间', index: 'createTime', type: 'date' },
    {
      title: '操作',
      width: '180px',
      buttons: [
        {
          text: '编辑',
          type: 'modal',
          component: NoticeDetailComponent,
          paramName: 'i',
          //     click: item => this.router.navigateByUrl(`coursesDetail?courseId=${item.materialId}`),
          click: () => this.st.reload(),
        },
        { text: '删除', click: (item: any) => this.del(item.noticeId) },
      ],
    },
  ];

数据取出并进行封装的通道方法

 this.noticedata = Array(res.data.length).fill({}).map((item: any, i: number) => {
        return {
          ID: [i + 1],
          noticeId: res.data[i].noticeId,
          noticeTitle: res.data[i].noticeTitle,
          noticeInfo: res.data[i].noticeInfo,
          noticeType: res.data[i].noticeType,
          status: res.data[i].status,
          userId: res.data[i].userId,
          projectId: res.data[i].projectId,
          createTime: res.data[i].createTime,
          updateTime: res.data[i].updateTime,
        };
      });