angular - 如何在 Angular 中动态呈现行时将卡住列添加到 primeNG

Question

我正在寻求帮助，以便在我的 primeng 表中添加卡住列功能，其中的列和行是动态呈现的。

我确实有一个配置(isPK: true)，它来 self 想制作卡住列的数据。

我试过按照 stackblitz 进行操作，但找不到与 PrimeNG 文档中给出的示例相匹配的解决方案

谢谢@Owen 的回答，但现在如果我尝试在 HTML 本身中添加一个额外的列，它就会像这样翻倍，

https://stackblitz.com/edit/primeng-tablescroll-demo-jvmrfs

Answer 1

有时从一个工作示例转移到一个接一个地生成你想要的东西会更容易。像下面这样的东西

<p-button class="secondary" label="Add row" (onClick)="onAddRow(card)"></p-button>


<p-table #dt [columns]="scrollableCols" [frozenColumns]="frozenCols" [value]="card" [scrollable]="true"
  scrollHeight="200px" frozenWidth="200px">
  <ng-template pTemplate="colgroup" let-columns>
    <colgroup>
      <col *ngFor="let col of columns" style="width:200px">
    </colgroup>
  </ng-template>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns">
        {{col.header}}
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-rowData let-columns="columns">
    <ng-container *ngFor="let tr of card[0].rows; let i = index">
      <tr>
        <ng-container *ngFor="let attr of card[0].attributes; let j = index">
          <td
            [ngClass]="{'error-block': 
                                                            (card[0].rows[i].validated == true && isSubmitted && card[0].rows[i][j].value === '' && card[0].rows[i][j].required === 'true') ||
                                                            (card[0].rows[i].validated == true && isSubmitted && card[0].rows[i][j].value.length < card[0].rows[i][j].minLength)}">
            <ng-container *ngIf="attr.type === 'string'">
              <input pInputText style="width: 100%;"
                                                                    (ngModelChange)="onChange($event, i, j, card)"
                                                                    type="text"
                                                                    [(ngModel)]="card[0].rows[i][j].value"
                                                                    [maxlength]="card[0].rows[i][j].maxLength"
                                                                    [minlength]="card[0].rows[i][j].minLength"/>
              <span class="error required-error" *ngIf="card[0].rows[i].validated == true && isSubmitted && card[0].rows[i][j].value === '' && card[0].rows[i][j].required === 'true'">
                                                                    <!-- This field is required. -->
                                                                </span>
              <span class="error minlength-error" *ngIf="card[0].rows[i].validated == true && isSubmitted && card[0].rows[i][j].value.length < card[0].rows[i][j].minLength">
                                                                    <!-- Please enter {{card[0].rows[i][j].minLength}} characters to continue. -->
                                                                </span>
              <!-- {{i}}, {{j}} {{card[0].rows[i][j] | json}} -->
            </ng-container>
            <ng-container *ngIf="attr.values">
              <select class="dropdown" [(ngModel)]="card[0].rows[i][j].value" (ngModelChange)="onChange($event, i, j, card)">
                                                                    <option *ngFor="let option of attr.values">{{option}}</option>
                                                                </select>
              <span class="error required-error" *ngIf="card[0].rows[i].validated == true && isSubmitted && card[0].rows[i][j].value === '' && card[0].rows[i][j].required === 'true'">
                                                                    <!-- This field is required. -->
                                                                </span>
            </ng-container>
            <ng-container *ngIf="attr.type === 'date'">
              <p-calendar [readonlyInput]="true" panelStyleClass="datepicker" appendTo="body"
                inputStyleClass="date-input" [(ngModel)]="card[0].rows[i][j].value"
                (ngModelChange)="onChange($event, i, j, card)" dateFormat="mm/dd/yy"></p-calendar>
            </ng-container>
          </td>
        </ng-container>
      </tr>
    </ng-container>
  </ng-template>
</p-table>

See Demo Here