特定の行の展開/折りたたみアイコンを非表示にする

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

と遊ぶPlunker：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> 

私は同じ問題を抱えていたし、このテンプレート列でそれを考え出しました。

NBこれは角度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>