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

【问题标题】：Hide expand / collapse icon for specific row隐藏特定行的展开/折叠图标
【发布时间】：2017-08-02 01:03:14
【问题描述】：

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

<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
    ];

Plunker 玩：https://plnkr.co/edit/JMMMMNLekNpNa393hHcz?p=preview

【问题讨论】：

标签： angular primeng

【解决方案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 的模板。

【讨论】：

【解决方案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>

【讨论】：