Question

我想在某个条件为真时隐藏网格中的展开图标。例如，如果我的表数据在底层数组中没有任何值。我知道我可以通过将p-column => expander设置为false来禁用该图标，但之后我没有任何行的图标。我需要根据当前网格数据为特定行启用它。我找不到任何方法来检索<p-column>元素中的当前行数据。

<p-dataTable [value]="testData" [expandableRows]="true">
  <p-column expander="true"></p-column>
  <p-column header="name">
    <template pTemplate let-row="rowData">
      {{row.name}}
    </template>
  </p-column>

  <template let-data pTemplate="rowexpansion">
    {{data.values | json}}
    <ul>
      <li *ngFor="let v of data.values">{{v | json}}</li>
    </ul>
  </template>
</p-dataTable>

this.testData = [
      {name: 'a', values: [
        'a', 'b', 'c'
      ]},
      {name: 'b', values: []}, // I don't need an expand icon when there are no values
    ];

使用的弹药：https://plnkr.co/edit/JMMMMNLekNpNa393hHcz?p=preview

Answer 1

  <p-column>
     <ng-template let-row="rowData" pTemplate="body">
        <a *ngIf="true/false" (click)="YOUR_TABLE_ID.toggleRow(row)">Toggle</a>
     </ng-template>
  </p-column>

我遇到了同样的问题，并通过此模板列找到了它。

注意这是针对Angular 4，只需将ng-template更改为ng2的模板。

Answer 2

我还需要显示/隐藏我的行扩展器按钮/图标，具体取决于我的行的某些条件。这就是我做到的。

 <p-dataTable [value]="students" selectionMode="single" [responsive]="true" [lazy]="false" resizableColumns="true" expandableRows="true" [loading]="dataTableDataLoading" class='primeNGDataTable' [scrollable]="true" scrollHeight="600px" #dtStudents>
   <p-column [style]="{'width':'40px'}">
      <ng-template let-data="rowData" pTemplate="body">
         <a *ngIf="data.addresses !== null && data.addresses.length > 0" (click)="dtStudents.toggleRow(data)">
            <i *ngIf="!dtStudents.isRowExpanded(data)" class="fa fa-chevron-circle-right" [style]="{'margin-top':'5px'}"></i>
            <i *ngIf="dtStudents.isRowExpanded(data)" class="fa fa-chevron-circle-down"></i>
         </a>
      </ng-template>
   </p-column>
   <p-column header="ID" field='id' [style]="{'width': '80px'}"></p-column>
   <p-column header="First Name" field='fname' [style]="{'width': '120px'}"></p-column>
    <ng-template let-data pTemplate="rowexpansion">
       <p-dataTable selectionMode="single" [value]="data.addresses" [lazy]="false" [responsive]="true">
          <p-column header="Address Line 1" field='addressLn1' [style]="{'width': '80px'}"></p-column>
          <p-column header="Address Line 2" field='addressLn2' [style]="{'width': '80px'}"></p-column>
          <p-column header="City" field='city' [style]="{'width': '80px'}"></p-column>
          <p-column header="State" field='state' [style]="{'width': '80px'}"></p-column>
          <p-column header="Zip" field='zip' [style]="{'width': '80px'}"></p-column>
       </p-dataTable>
   </ng-template>           
 </p-dataTable>

隐藏特定行的展开/折叠图标

2 个答案: