问题描述
我正在尝试使用包w-ng5
从Angular过滤表中的数组数据,但它正在搜索并且没有找到任何内容(空白列表).这是我遵循的步骤:
I'm trying to filter my array data on a table from Angular with the package w-ng5
, but it's searching and it doesn't find nothing (blank list). This is the steps that I've followed:
软件包npm
在这里您可以找到Angular的 w-ng5 的文档.
Here you can find the documentation of w-ng5 for Angular.
步骤
使用npm
npm install w-ng5 --save
导入我的应用模块
//Pipes of the aplication
import { TruncatePipe } from './pipes/truncate.pipe';
import { PipesModule } from 'w-ng5';
声明app.module的部分
Declare section of app.module
imports: [
BrowserModule,
RouterModule.forRoot(routes),
FormsModule,
NgbModule.forRoot(),
HttpClientModule,
ColorPickerModule,
PdfViewerModule,
CurrencyMaskModule,
ReactiveFormsModule,
NgxPaginationModule,
NgxTypeaheadModule,
PipesModule
],
执行:
<input type="text" [(ngModel)]="filterInvoice" name="filterInvoice">
<table class="table table-hover table-sm">
<caption>Tabla de Facturas</caption>
<thead class="thead-dark">
<tr>
<th class="text-center">#</th>
<th class="text-center">Invoice</th>
<th class="text-center">Note</th>
<th class="text-center">State</th>
<th class="text-center">Customer</th>
<th class="text-center">Date</th>
<th class="text-center">Days</th>
<th class="text-center">Expiration</th>
<th class="text-center">Payment Type</th>
<th class="text-center">Option</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let invoice of invoices | filter : filterInvoice | paginate: { itemsPerPage: 10, currentPage: page }, index as i">
<td class="text-center">
{{i+1}}
</td>
<td class="text-center">
{{invoice.number_invoice}}
</td>
<td class="text-center">
{{invoice.note_invoice}}
</td>
<td class="text-center">
{{invoice.state_invoice}}
</td>
<td class="text-center">
{{invoice.customer_invoice}}
</td>
<td class="text-center">
{{invoice.date_invoice}}
</td>
<td class="text-center">
{{invoice.days_invoice}}
</td>
<td class="text-center">
{{invoice.expiration_invoice}}
</td>
<td class="text-center">
{{invoice.payment_invoice}}
</td>
<td class="text-center">
<button type="button" class="btn btn-warning btn-sm">
Detail
</button>
</td>
</tr>
</tbody>
</table>
数据表JSON
invoices:any[] =[
{
number_invoice: '996',
note_invoice: '0001',
state_invoice: 'pending',
customer_invoice: 'Johan Corrales',
date_invoice: '2018-10-30',
days_invoice: '30',
expiration_invoice: '2018-11-30',
payment_invoice: 'Credit'
},
{
number_invoice: '997',
note_invoice: 'N/A',
state_invoice: 'Pay out',
customer_invoice: 'Richard Castle',
date_invoice: '2018-10-30',
days_invoice: '0',
expiration_invoice: 'N/A',
payment_invoice: 'Credit'
},
{
number_invoice: '998',
note_invoice: 'N/A',
state_invoice: 'pending',
customer_invoice: 'Kyara Wolff',
date_invoice: '2018-10-30',
days_invoice: '30',
expiration_invoice: '2018-11-30',
payment_invoice: 'Credit'
},
{
number_invoice: '999',
note_invoice: 'N/A',
state_invoice: 'pending',
customer_invoice: 'Donaldo Trumpete',
date_invoice: '2018-10-30',
days_invoice: '30',
expiration_invoice: '2018-11-30',
payment_invoice: 'Credit'
},
{
number_invoice: '1000',
note_invoice: '0001',
state_invoice: 'pending',
customer_invoice: 'Mark Wahlber',
date_invoice: '2018-10-30',
days_invoice: '30',
expiration_invoice: '2018-11-30',
payment_invoice: 'Cash'
},
{
number_invoice: '1001',
note_invoice: 'N/A',
state_invoice: 'Pay out',
customer_invoice: 'Ryan Reynolds',
date_invoice: '2018-10-30',
days_invoice: '0',
expiration_invoice: 'N/A',
payment_invoice: 'Cash'
},
]
服务发票
public getInvoice()
{
return new Promise(
resolve=>{
this.http.get('authentication/consultInvoice')
.subscribe(
data => resolve(data)
)
}
)
};
构造器组件
constructor(private _serviceInvoice:InvoiceService)
{
_serviceInvoice.getInvoice()
.then(data=>{
this.invoices = data;
this.onFilterChange();
})
.catch(err=>{
console.log(err);
});
};
这是我从Angular中得到的错误> ERROR TypeError: "item is null; can't access its "toString" property"
And this is the error that I'm getting from Angular> ERROR TypeError: "item is null; can't access its "toString" property"
注释我知道这一点(来自Angular的文档):
NotesI know about this(docs from Angular):
推荐答案
您可以创建一个过滤器函数,只要您的过滤器字符串更改,该函数就会被调用.
You can create a filter function that is called whenever your filter string changes.
代码将如下所示:
isMatch(item) {
if (item instanceof Object) {
return Object.keys(item).some((k) => this.isMatch(item[k]));
} else {
return item.toString().indexOf(this.filterString) > -1
}
}
这将递归遍历对象,并查找任何匹配项.虽然没有必要(请参见对象结构是平坦的),但如果结构发生变化,它可能会很有用.请记住,它是区分大小写的
This will iterate through the object recursively, and look for any matches. While it's not necessary (seeing as your object structure is flat), it could be useful if your structure ever changes. Bear in mind it's case sensitive as it stands
然后,您需要创建一个调用它的函数,如下所示:
You then need to create a function that calls it, like so:
onFilterChange() {
this.filtered = this.invoices.filter((invoice) => this.isMatch(invoice));
}
并修改输入内容,以便在更改搜索字符串时重新过滤输入内容
And amend your input so that it refilters any time that the search string is changed
<input [(ngModel)]="filterString" (ngModelChange)="onFilterChange()" />
Here is a Stackblitz demo
这篇关于尝试过滤* ngFor指令中的数据的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!