Angular PrimeNG固定柱设置为右侧

Question

我是Angular的PrimeNG的新手。

如何使用PrimeNG的fixedColumn固定表格最右边一列的位置？我使用了图片链接中所示的滚动功能（最右边的列显示）：

我想使页面加载时已显示“动作”列，并具有滚动功能。

我已经尝试过搜索，但是我的问题没有答案（或者也许有答案，但我看不到它们）

这是我的代码

supplierjobrule.component.ts

 import {
  Component, OnInit,
  EventEmitter,
  Input,
  Output, 
  OnDestroy} from '@angular/core';
//import { SubActionService } from '../subaction.service';
import { Subscription } from 'rxjs';
import { tblSupplierJobRule } from './models/tblsupplierjobrule.model';
import { ToastrService } from 'ngx-toastr';
import { ISupplierJobRulePage } from './models/supplierjobrulepage.model';

@Component({
  selector: 'app-supplierjobrule',
  templateUrl: './supplierjobrule.component.html',
  styleUrls: ['./supplierjobrule.component.css']
})
export class SupplierJobRuleComponent implements OnInit{

  private jobRulesPage: ISupplierJobRulePage;
  private jobRules: tblSupplierJobRule[];
  private cols: any[];
  private frozenCols: any[];
  private jobRule: tblSupplierJobRule = {
    supplierJobRuleId: 0,
    supplierId: 0,
    serviceProvidedId: 0,
    postcodeFrom: "",
    postcodeTo: "",
    arrangement: "",
    arrangementDate: "",
    chargeRate: 0,
    gstRate: 0,
    defaultOperatorId: "",
    diaryDaysRoutine: "",
    diaryDaysUrgent: "",
    diaryDaysSuperUrgent: ""
  }
  constructor(private toastr: ToastrService) {

  }

  ngOnInit(): void {
    if (this.jobRules == undefined) {
      this.jobRules = new Array<tblSupplierJobRule>();
      this.jobRules.push(this.jobRule);
      this.jobRule = {
        supplierJobRuleId: 0,
        supplierId: 0,
        serviceProvidedId: 0,
        postcodeFrom: "",
        postcodeTo: "",
        arrangement: "",
        arrangementDate: "",
        chargeRate: 0,
        gstRate: 0,
        defaultOperatorId: "",
        diaryDaysRoutine: "",
        diaryDaysUrgent: "",
        diaryDaysSuperUrgent: ""
      };
    }

    this.cols = [
      { field: 'serviceProvidedId', header: 'Services Provided/Job Types' },
      { field: 'postcodeFrom', header: 'Postcode From' },
      { field: 'postcodeTo', header: 'Postcode To' },
      { field: 'arrangement', header: 'Arrangement' },
      { field: 'arrangementDate', header: 'Arrangement Date' },
      { field: 'chargeRate', header: 'Charge Rate' },
      { field: 'gstRate', header: 'GST Rate' },
      { field: 'defaultOperatorId', header: 'Default Operator' },
      { field: 'diaryDaysRoutine', header: 'Diary Days (Priority Routine)' },
      { field: 'diaryDaysUrgent', header: 'Diary Days (Priority Urgent)' },
      { field: 'diaryDaysSuperUrgent', header: 'Diary Days (Priority Super Urgent' },
      { field: '', header: 'Actions' }
    ];
  }

  onRowSave(jobRule) {
    console.log(jobRule);
  }

  onRowDelete(jobRule) {
    let index = this.jobRules.indexOf(jobRule);
    this.jobRules = this.jobRules.filter((val, i) => i != index);
    this.jobRule = {
      supplierJobRuleId: 0,
      supplierId: 0,
      serviceProvidedId: 0,
      postcodeFrom: "",
      postcodeTo: "",
      arrangement: "",
      arrangementDate: "",
      chargeRate: 0,
      gstRate: 0,
      defaultOperatorId: "",
      diaryDaysRoutine: "",
      diaryDaysUrgent: "",
      diaryDaysSuperUrgent: ""
    };
  }

  addRow() {
    let jobRules = [...this.jobRules];
    jobRules.push(this.jobRule);
    this.jobRules = jobRules;
    this.jobRule = {
      supplierJobRuleId: 0,
      supplierId: 0,
      serviceProvidedId: 0,
      postcodeFrom: "",
      postcodeTo: "",
      arrangement: "",
      arrangementDate: "",
      chargeRate: 0,
      gstRate: 0,
      defaultOperatorId: "",
      diaryDaysRoutine: "",
      diaryDaysUrgent: "",
      diaryDaysSuperUrgent: ""
    };
  }
}

supplierjobrule.component.html

<p-table [columns]="cols" [value]="jobRules" dataKey="supplierJobRuleId" [paginator]="true" [rows]="5" [responsive]="true" [scrollable]="true" [style]="{width:'100%'}">
  <ng-template pTemplate="caption">
    Supplier Job Rules
  </ng-template>
  <ng-template pTemplate="colgroup" let-columns>
    <colgroup>
      <col *ngFor="let col of columns" style="width:150px">
    </colgroup>
  </ng-template>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns" [pSortableColumn]="col.field" style="width:100px">
        {{col.header}}
        <p-sortIcon [field]="col.field" ariaLabel="Activate to sort" ariaLabelDesc="Activate to sort in descending order" ariaLabelAsc="Activate to sort in ascending order"></p-sortIcon>
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-jobRule>
    <tr [pEditableRow]="jobRule">
      <td pEditableColumn style="text-align: center; padding-top: 0px; padding-bottom: 0px;">
        <p-cellEditor>
          <ng-template pTemplate="input">
            <input pInputText type="text" [(ngModel)]="jobRule.serviceProvidedId">
          </ng-template>
          <ng-template pTemplate="output">
            {{jobRule.serviceProvidedId}}
          </ng-template>
        </p-cellEditor>
      </td>
      <td pEditableColumn style="text-align: center; padding-top: 0px; padding-bottom: 0px;">
        <p-cellEditor>
          <ng-template pTemplate="input">
            <input pInputText type="text" [(ngModel)]="jobRule.postcodeFrom">
          </ng-template>
          <ng-template pTemplate="output">
            {{jobRule.postcodeFrom}}
          </ng-template>
        </p-cellEditor>
      </td>
      <td pEditableColumn style="text-align: center; padding-top: 0px; padding-bottom: 0px;">
        <p-cellEditor>
          <ng-template pTemplate="input">
            <input pInputText type="text" [(ngModel)]="jobRule.postcodeTo">
          </ng-template>
          <ng-template pTemplate="output">
            {{jobRule.postcodeTo}}
          </ng-template>
        </p-cellEditor>
      </td>
      <td pEditableColumn style="text-align: center; padding-top: 0px; padding-bottom: 0px;">
        <p-cellEditor>
          <ng-template pTemplate="input">
            <input pInputText type="text" [(ngModel)]="jobRule.arrangement">
          </ng-template>
          <ng-template pTemplate="output">
            {{jobRule.arrangement}}
          </ng-template>
        </p-cellEditor>
      </td>
      <td pEditableColumn style="text-align: center; padding-top: 0px; padding-bottom: 0px;">
        <p-cellEditor>
          <ng-template pTemplate="input">
            <input pInputText type="text" [(ngModel)]="jobRule.arrangementDate">
          </ng-template>
          <ng-template pTemplate="output">
            {{jobRule.arrangementDate}}
          </ng-template>
        </p-cellEditor>
      </td>
      <td pEditableColumn style="text-align: center; padding-top: 0px; padding-bottom: 0px;">
        <p-cellEditor>
          <ng-template pTemplate="input">
            <input pInputText type="text" [(ngModel)]="jobRule.chargeRate">
          </ng-template>
          <ng-template pTemplate="output">
            {{jobRule.chargeRate}}
          </ng-template>
        </p-cellEditor>
      </td>
      <td pEditableColumn style="text-align: center; padding-top: 0px; padding-bottom: 0px;">
        <p-cellEditor>
          <ng-template pTemplate="input">
            <input pInputText type="text" [(ngModel)]="jobRule.gstRate">
          </ng-template>
          <ng-template pTemplate="output">
            {{jobRule.gstRate}}
          </ng-template>
        </p-cellEditor>
      </td>
      <td pEditableColumn style="text-align: center; padding-top: 0px; padding-bottom: 0px;">
        <p-cellEditor>
          <ng-template pTemplate="input">
            <input pInputText type="text" [(ngModel)]="jobRule.defaultOperatorId">
          </ng-template>
          <ng-template pTemplate="output">
            {{jobRule.defaultOperatorId}}
          </ng-template>
        </p-cellEditor>
      </td>
      <td pEditableColumn style="text-align: center; padding-top: 0px; padding-bottom: 0px;">
        <p-cellEditor>
          <ng-template pTemplate="input">
            <input pInputText type="text" [(ngModel)]="jobRule.diaryDaysRoutine">
          </ng-template>
          <ng-template pTemplate="output">
            {{jobRule.diaryDaysRoutine}}
          </ng-template>
        </p-cellEditor>
      </td>
      <td pEditableColumn style="text-align: center; padding-top: 0px; padding-bottom: 0px;">
        <p-cellEditor>
          <ng-template pTemplate="input">
            <input pInputText type="text" [(ngModel)]="jobRule.diaryDaysUrgent">
          </ng-template>
          <ng-template pTemplate="output">
            {{jobRule.diaryDaysUrgent}}
          </ng-template>
        </p-cellEditor>
      </td>
      <td pEditableColumn style="text-align: center; padding-top: 0px; padding-bottom: 0px;">
        <p-cellEditor>
          <ng-template pTemplate="input">
            <input pInputText type="text" [(ngModel)]="jobRule.diaryDaysSuperUrgent">
          </ng-template>
          <ng-template pTemplate="output">
            {{jobRule.diaryDaysSuperUrgent}}
          </ng-template>
        </p-cellEditor>
      </td>
      <td style="text-align: center; padding-top: 0px; padding-bottom: 0px;">
        <button pButton type="button" pSaveEditableRow class="btn btn-success btn-sm" (click)="onRowSave(jobRule)" title="Save">
          <span class="fa fa-check"></span>
        </button>
        <button pButton type="button" class="btn btn-danger btn-sm" (click)="onRowDelete(jobRule)" title="Delete">
          <span class="fa fa-times"></span>
        </button>
      </td>
    </tr>
  </ng-template>
  <ng-template pTemplate="summary" let-jobRule>
    <div style="text-align:left">
      <button type="button" label="Add" class="btn btn-info btn-sm" (click)="addRow()">
        <span class="fa fa-plus"></span>
      </button>
    </div>
  </ng-template>
</p-table>

我希望有人可以帮助像我这样的新手。谢谢！