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

Angular 隐藏特定行的展开/折叠图标,angular,primeng,Angular,Primeng,当某个条件为真时,我想在网格中隐藏展开图标。例如,如果我的表数据在基础数组中没有任何值。我知道我可以通过将p-column=>expander设置为false来禁用图标,但是我没有所有行的图标。我需要根据当前网格数据为特定行启用它。我找不到任何方法来检索元素中的当前行数据 <p-dataTable [value]="testData" [expandableRows]="true"> <p-column expander="true"></p-column>

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

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

{{row.name}
{{data.values}json}
    {{v|json}
this.testData=[ {name:'a',值:[ “a”、“b”、“c” ]}, {name:'b',value:[]},//当没有值时,我不需要展开图标 ];
要玩的扑克牌:


切换
我也遇到了同样的问题,并通过这个模板专栏解决了这个问题


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

我还需要根据行的某些条件显示/隐藏行扩展器按钮/图标。我就是这样做的

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

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