具有按列搜索字段的 Jhipster 表答案

【问题标题】：Jhipster table with search fields by columns具有按列搜索字段的 Jhipster 表
【发布时间】：2019-08-09 21:30:20
【问题描述】：

我在我的应用程序中使用 jhipster。我有一个添加了分页和排序的表，但我还想在列中添加一个搜索字段，这可能吗？会是这样的http://ng-table.com/

我的 HTML 是：

<div class="table-responsive" *ngIf="entities">

    <table class="table table-striped">
        <thead>
        <tr jhiSort [(predicate)]="predicate" [(ascending)]="reverse" [callback]="transition.bind(this)">
        <th jhiSortBy="id"><span jhiTranslate="global.field.id">ID</span> <span class="fa fa-sort"></span></th>
        <th jhiSortBy="nombre"><span jhiTranslate="app.entity.name">Name</span> <span class="fa fa-sort"></span></th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let entity of entities ;trackBy: trackId">
            <td><a [routerLink]="['../entity', entity.id ]">{{entity.id}}</a></td>
            <td>{{entity.name}}</td>                               
        </tr>
        </tbody>
    </table>
</div>

谢谢。

【问题讨论】：

标签： angular jhipster

【解决方案1】：

我设法使用输入和 angular 的“purefilter”属性来做到这一点。是这样的：

<input type="text" [(ngModel)]="filter" class="form-control">

<table> 
......
    <tr *ngFor="let entity of (entities | pureFilter:filter:'name')>
.......

在 pureFilter 中我们表示 'pureFilter:nameOfFilter:attributeOfEntity'

【讨论】：