angular 2 で検索パイプをセットアップしています。angular beta 14を使用していたとき、検索パイプは完全に機能していましたが、rc5にアップグレードしたところ、検索パイプが壊れてエラーが発生しました。HTMLコードからパイプを削除すると、製品がロードされます。これは一般的な検索およびフィルター パイプであり、多くのモジュールで使用する必要があります。問題の解決にご協力ください。
TypeError: Cannot read property 'toString' of undefined
at SearchPipe.compareWithAllFields (http://localhost:4200/main.bundle.js:72117:57)
at Array.filter (native)
at SearchPipe.transform
search.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import {isObject} from "rxjs/util/isObject";
import {isEmpty} from "rxjs/operator/isEmpty";
import {empty} from "rxjs/Observer";
@Pipe({
name: 'search'
})
export class SearchPipe implements PipeTransform
{
transform(input, [searchString]:Array<String>)
{
if (input == null) return input;
return input.filter(this.compareWithAllFields, searchString);
}
compareWithAllFields(value, index)
{
var fields = Object.keys(value);
for (let i = 0; i < fields.length; i++)
{
if (value[fields[i]] != null)
{
if (isObject(value[fields[i]]))
{
var childFields = Object.keys(value[fields[i]]);
if (childFields.length > 0)
{
for (let j = 0; j < childFields.length; j++)
{
if ((value[fields[i]][childFields[j]] + "").indexOf(this.toString()) !== -1)
{
return true;
}
}
}
}
if ((value[fields[i]] + "").indexOf(this.toString()) !== -1)
{
return true;
}
}
}
return false;
}
}
list-products.component.html
<div class="container">
<div class="row">
<div class="col-sm-3 form-group">
<input placeholder="search product" class="form-control" type="text" #searchProduct (keyup)="0">
</div>
<div class="col-sm-3 col-sm-offset-6">
<button [routerLink]="['/LoggedIn','Product','ProductAdd']" class="btn btn-lg btn-app">Add Product</button>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h3>Products</h3>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Sr #</th>
<th>Name</th>
<th>Category</th>
<th>Barcode</th>
<th>Unit</th>
<th>Description</th>
<th>Quantity</th>
<th>Minimum Stock Level</th>
<th>Discount</th>
<th>Cost</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let product of products | search:searchProduct.value;let serial = index">
<td>{{ serial+1 }}</td>
<td>{{ product.name}}</td>
<td>{{ product.productCategory.name}}</td>
<td>{{ product.barcode}}</td>
<td>{{ product.unit?.name}}</td>
<td>{{ product.description}}</td>
<td>{{ product.quantity}}</td>
<td>{{ product.minimumStockLevel}}</td>
<td>{{ product.discount}}</td>
<td>{{ product.cost}}</td>
<td>
<button class="btn btn-danger" (click)="delete(product)">Delete</button>
<button class="btn btn-default"
[routerLink]="['/LoggedIn','Product','ProductEdit',{id:product.id}]">Edit
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>