Angular ant设计ng Zorro表列固定问题

我正在使用我的角度项目来，有人知道如何固定表中的页脚列部分吗，？如下图所示

此处编码

interface ProjectBooked {
  key: string;
  cName: string;
  cTitle: any;
  pLocation: string;
  conName: any;

  sortOrder?: NzTableSortOrder;
  sortFn?: NzTableSortFn;
  listOfFilter?: NzTableFilterList;
  filterFn?: NzTableFilterFn;
  filterMultiple?: boolean;
  sortDirections?: NzTableSortOrder[];
}

@Component({
  selector: 'nz-demo-table-multiple-sorter',
  template: `
    <nz-table
              #basicTable
              #sortTable
              [nzData]="listOfDisplayData"
              #borderedTable
              nzBordered
              #headerTable
              [nzLoading]="loading"
              [nzPageSize]="5" [nzScroll]="{ x: '1000px', y: '240px' }">
              <thead>
              <tr>
                <th nzCustomFilter nzColumnKey="cName" [nzSortFn]="sortFn"
                >
                  Company Name
                  <nz-filter-trigger [(nzVisible)]="visible" [nzActive]="searchValue.length > 0"
                                     [nzDropdownMenu]="menu">
                    <i nz-icon nzType="search"></i>
                  </nz-filter-trigger>
                </th>
                <th>Position Title</th>
                <th>Position Location</th>
                <th>Consultant Name</th>
                <th nzWidth="100px">Status</th>
              </tr>
              </thead>
              <tbody>
              <tr *ngFor="let data of basicTable.data">
                <td>{{ data.cName }}</td>
                <td>{{ data.cTitle }}</td>
                <td>{{ data.pLocation }}</td>
                <td>{{ data.conName }}</td>
                <td>
                  <a><nz-tag [nzColor]="'blue'">Booked</nz-tag></a>
                </td>
              </tr>
              </tbody>
            </nz-table>
            <nz-dropdown-menu #menu="nzDropdownMenu">
              <div class="ant-table-filter-dropdown">
                <div class="search-box">
                  <input type="text" nz-input placeholder="Search name" [(ngModel)]="searchValue" />
                  <button nz-button nzSize="small" nzType="primary" (click)="search()" class="search-button">
                    Search
                  </button>
                  <button nz-button nzSize="small" (click)="reset()">Reset</button>
                </div>
              </div>
            </nz-dropdown-menu>
  `
})
export class NzDemoTableMultipleSorterComponent {
   constructor(private i18n: NzI18nService) {}



  loading = false;
  searchValue = '';
  visible = false;
  // Project Booked




  listOfData: ProjectBooked[] = [
    {
      key: '1',
      cName: 'OBUSIT ',
      cTitle: 'Chief Administrative Officer',
      pLocation: 'Washington, DC',
      conName: 'Admin',
  
},
    {
      key: '2',
      cName: 'OBUSIT TEST ',
      cTitle: 'Chief Administrative Officer',
      pLocation: 'Washington, DC',
           conName: 'Admin',
    },
    {
      key: '3',
      cName: 'OBUSIT University',
      cTitle: 'Chief Administrative Officer',
      pLocation: 'Washington, DC',
      conName: 'Admin',
    },
    {
      key: '4',
      cName: 'OBUSIT Howard University',
      cTitle: 'Chief Administrative Officer',
      pLocation: 'Washington, DC',
      conName: 'Admin',
      
    },

  ];
  listOfDisplayData = [...this.listOfData];








  // Month Picker
  date = null;
  dateRange = [];
  isEnglish = false;




  reset(): void {
    this.searchValue = '';
    this.search();
  }

  search(): void {
    this.visible = false;
    this.listOfDisplayData = this.listOfData.filter((item: ProjectBooked) => item.cName.indexOf(this.searchValue) !== -1);
  }





  onChange(result: Date): void {
    console.log('onChange: ', result);
  }

  getWeek(result: Date): void {
    console.log('week: ', getISOWeek(result));
  }

  changeLanguage(): void {
    this.i18n.setLocale(this.isEnglish ? zh_CN : en_US);
    this.isEnglish = !this.isEnglish;
  }


  ngOnInit(): void {


  }

  sortFn = (a: ProjectBooked, b: ProjectBooked) => a.cName.localeCompare(b.cName);

}

接口项目{
键：字符串；
cName：字符串；
cTitle：任何；
位置：字符串；
康奈姆：任何；
排序器？：NzTableSortOrder；
sortFn？：NzTableSortFn；
listOfFilter？：NzTableFilterList；
filterFn？：NzTableFilterFn；
filterMultiple？：布尔值；
sortDirections？：NzTableSortOrder[]；
}
@组成部分({
选择器：“nz演示台多分拣机”，
模板：`
公司名称
职位名称
位置测定
顾问名称
地位
{{data.cName}
{{data.cTitle}
{{data.pLocation}
{{data.conName}
预定
搜寻
重置
`
})
导出类NzDemoTableMultipleSorterComponent{
构造函数（专用i18n:nzi18n服务）{}
加载=假；
搜索值=“”；
可见=假；
//预定项目
listOfData:ProjectBooked[]=[
{
键：“1”，
cName:“OBUSIT”，
cTitle：“首席行政官”，
地点：'华盛顿特区'，
conName:'管理员'，
},
{
键：“2”，
cName:“OBUSIT测试”，
cTitle：“首席行政官”，
地点：'华盛顿特区'，
conName:'管理员'，
},
{
键：“3”，
cName:“奥布西特大学”，
cTitle：“首席行政官”，
地点：'华盛顿特区'，
conName:'管理员'，
},
{
键：“4”，
cName：“奥布西特霍华德大学”，
cTitle：“首席行政官”，
地点：'华盛顿特区'，
conName:'管理员'，
},
];
listOfDisplayData=[…this.listOfData]；
//月份选择器
日期=空；
日期范围=[]；
isEnglish=假；
重置（）：无效{
this.searchValue=''；
这是search（）；
}
search（）：void{
可见=假；
this.listOfDisplayData=this.listOfData.filter（（项目：ProjectBooked）=>item.cName.indexOf（this.searchValue）！=-1）；
}
变更一次（结果：日期）：作废{
log（'onChange:'，result）；
}
getWeek（结果：日期）：无效{
log（'week:'，getISOWeek（result））；
}
changeLanguage（）：void{
this.i18n.setLocale（this.isEnglish？zh_CN:en_US）；
this.isEnglish=！this.isEnglish；
}
ngOnInit（）：void{
}
sortFn=（a:ProjectBooked，b:ProjectBooked）=>a.cName.localeCompare（b.cName）；
}

TL；博士——这不是一个简单的解决办法

---

“last”行并不总是最后一行，因为您已启用分页。因此，如果您希望最后一行充当某种摘要，则需要从

*ngFor

循环中提取它，并将其置于行范围之外。一种方法是利用

[nzFooter]

，但它需要

TemplateRef

（或字符串），因此您需要使用以下内容创建和填充模板：

问题是页脚不符合

[nzScroll]

，这意味着：

因此，有必要进行一些黑客攻击

---

另一个，甚至是一个选择是

创建另一个没有标题（或隐藏标题）的表

仅用最后一行填充它

将此表直接放在原始标题上方（显然，为其保留了一些空间）

将操作从主表委派给新创建的表，以便排序、筛选等工作

---

你想修正表中的最后一条记录吗？是的，我想修正。您知道如何正确操作吗？您想修复页脚列还是页脚行？@yurzui i wanan修复了最后一整行，不清楚您想要实现什么“修复”的意思是使其像标题一样粘性？或者将其作为“页脚”固定在底部？还是换一种颜色？谢谢你宝贵的时间和观点，我有了一个想法，然后我可以修复它