如果更改td数据,则p表的静态列上的globalfilter

时间:2018-09-24 06:09:48

标签: dynamic-content primeng-turbotable global-filter

我正在尝试对表列为静态的p表进行全局过滤,而且表数据会根据某些布尔条件而变化。 table字段包含布尔数据,但应将过滤器应用于布尔值提供的数据。

例如“性别”字段为布尔值,如果为true,则在表格中显示“男”,否则为“女”。我希望过滤器处理td(Male / Female)中的数据

<input type="text" pInputText size="35" [(ngModel)]="filterValue" (input)="table.filterGlobal(filterValue, 'contains')" style="width:auto">

<p-table #table [value]="myData"   [globalFilterFields]="['name','gender','profession']" >
        <ng-template  pTemplate="header" >
            <tr>
                <th [pSortableColumn]="'name'" style="width:60%">  Name </th>
                <th  [pSortableColumn]="'gender'" style="width:20%"> Gender </th>
                <th  [pSortableColumn]="'profession'" style="width:20%"> Profession </th>
            </tr>
        </ng-template>
        <ng-template pTemplate="body" let-rowData let-rowIndex="rowIndex">
            <tr [pSelectableRow]="rowData" [pSelectableRowIndex]="rowIndex">                 
                <td title="{{rowData['name']}}" style="width:60%"> {{rowData['uri']}} </td>
                <td  title="{{ (rowData['gender'])? 'Male' : 'Female' }}" style="width:20%">{{ (rowData['isMaster'])? "Male" : "Female" }}</td>
                <td  title="{{ (rowData['profession'])? 'Professor' : 'Student' }}" style="width:20%">
                <button type="button" class="primary" (click)="changeState()">{{ (rowData['profession'])? "Professor" : "Student" }}</button>
                </td>
            </tr>

        </ng-template>
        <ng-template pTemplate="emptymessage" >
            <tr>
                <td [attr.colspan]="3" class="noRecordsMsg">
                    No Data found
                </td>
            </tr>
        </ng-template>
    </p-table>



myData = [{active:true,name:"ABC",gender:true,profession:true},
{active:true,name:"PQR",gender:false,profession:true},
{active:true,name:"XYZ",gender:true,profession:false}]

0 个答案:

没有答案