角度2の価格フィルタパイプ - 未定義のプロパティ '0'を読み取ることができません

Question

2つの変数に基づいて商品を除外する価格フィルタを作成したいとします。これらの2つの変数は、最小価格と最大価格です。

現在、私は物を理解しやすくするために最低価格を実装しています。 * ngForディレクティブの後に| priceFilter:priceMinFilterパイプを追加すると、私はこの "Cannot read property '0' of undefined"エラーを受け取ります。

私はこの問題の周りに頭を浮かべようとしていますが、誰かがアドバイスをしたり、何か私はここで間違っていると教えてもらえますか？ありがとう。ここで

はplunkです：https://plnkr.co/tU82lO

app.component.ts

@Component({ 
    selector: 'my-app', 
    templateUrl: 'src/app.html', 
    styleUrls: ['src/app.css'] 
}) 

export class App { 

    @Input() priceMinFilter: number; 

    filterPrice(filter) { 
    this.priceMinFilter = filter.priceMin; 
    } 

    _productList = [ 
    { 
     "name": "Product One", 
     "price": 600, 
    }, 
    { 
     "name": "Product Two", 
     "price": 1100, 
    }, 
    { 
     "name": "Product Three", 
     "price": 2150, 
    }, 
    { 
     "name": "Product Four", 
     "price": 3500, 
    }, 
    { 
     "name": "Product Five", 
     "price": 4300, 
    }, 
    { 
     "name": "Product Six", 
     "price": 5400, 
    }, 
    { 
     "name": "Product Seven", 
     "price": 6900, 
    }, 
    { 
     "name": "Product Eighth", 
     "price": 14000, 
    }, 
    { 
     "name": "Product Nine", 
     "price": 26000, 
    }, 
    { 
     "name": "Product Ten", 
     "price": 30000, 
    }, 
    { 
     "name": "Product Eleven", 
     "price": 160000, 
    }, 
    { 
     "name": "Product Twelve", 
     "price": 1000000, 
    } 
    ] 

} 

app.component.html

<!-- Title --> 
<h2 class="title">Price Filter Pipe with Data Driven Form Approach</h2> 

<!-- Filter --> 
<zt-filter (filterPrice)='filterPrice($event)'></zt-filter> 

<!-- Notification --> 
<div class="note" *ngIf="priceMinFilter"> 
    <span>Filtering Products from <strong>{{ priceMinFilter }}</strong></span> 
</div> 

<!--Product List --> 
<div class="price-list"> 
    <div class="product-item" *ngFor="let _product of _productList | priceFilter:priceMinFilter"> 
     <span class="name">{{ _product.name }}</span><span class="price">{{ _product.price | currency:'USD':true:'1.0-2' }}</span> 
    </div> 
</div> 

filter.component.ts

@Component({ 
    selector: 'zt-filter', 
    templateUrl: 'src/filter.component.html', 
    styleUrls: ['src/filter.component.css'] 
}) 
export class FilterComponent implements OnInit { 

// Initializing Properties 
    priceMinFilter: number; 

    priceFilterForm: FormGroup; 

    // Outputs 
    @Output() filterPrice: EventEmitter<{ 
    priceMin: number, 
    }> = new EventEmitter<{ 
    priceMin: number, 
    }>(); 

    // Constructor 
    constructor() { 
    this.priceFilterForm = new FormGroup({ 
     priceMin: new FormControl('any') 
    }); 

    this.priceFilterForm.controls['priceMin'].valueChanges.subscribe(
     (data: any) => console.log(data) 
    ) 
    } 

    // From Actions 
    onSubmit() { 
    this.filterPrice.emit({ 
     priceMin: this.priceMinFilter 
    }); 
    } 

    // Data 
    _priceOptions = [ 
    { "valueP": null }, 
    { "valueP": 500 }, 
    { "valueP": 1000 }, 
    { "valueP": 2000 }, 
    { "valueP": 3000 }, 
    { "valueP": 4000 }, 
    { "valueP": 5000 }, 
    { "valueP": 10000 }, 
    { "valueP": 20000 }, 
    { "valueP": 30000 }, 
    { "valueP": 40000 }, 
    { "valueP": 50000 }, 
    { "valueP": 60000 }, 
    { "valueP": 70000 }, 
    { "valueP": 80000 }, 
    { "valueP": 90000 }, 
    { "valueP": 100000 }, 
    { "valueP": 150000 }, 
    { "valueP": 200000 } 
    ] 
} 

filter.c

<form [formGroup]="priceFilterForm" class="price-filter-form" autocomplete="off" novalidate (ngSubmit)="onSubmit()"> 
    <div class="form-group"> 

     <!-- Min Price Select --> 
     <label for="price-min">Min Price</label> 
     <select id="price-min" class="form-control" name="pricemin" [(ngModel)]="priceMinFilter" formControlName="priceMin"> 
     <option *ngFor="let _priceMin of _priceOptions" [value]="_priceMin.valueP">{{ _priceMin.valueP | currency:'USD':true:'1.0-2' }}</option> 
    </select> 

     <!-- Filter Button --> 
     <button type="submit">Filter by Minimum Price!</button> 

    </div> 
</form> 

filter.pipe.ts

@Pipe({ 
    name: 'priceFilter' 
}) 
export class PriceFilterPipe implements PipeTransform { 

    transform(value, args?) { 
    // ES6 array destructuring 
    let [minPrice] = args; 
    return value.filter(_product => { 
     return _product.valueP >= +minPrice; 
    }); 
    } 
} 

omponent.html感謝します！

Answer 1

私はカスタムフィルタパイプを作成することでこの問題を解決できました。

あなたはでリポジトリをチェックアウトすることができます：私はあなたの問題を解決している https://github.com/cstodor/Angular2-Price-Filter

filter.pipe.ts

transform(list, minPrice: number | undefined, maxPrice:number | undefined) { 
    let filter_list = list; 
    if (minPrice) { 
    filter_list = filter_list.filter(_item => { 
     return _item.price >= +minPrice; 
    }); 
    } 

    if (maxPrice) { 
    filter_list = filter_list.filter(_item => { 
     return _item.price <= +maxPrice; 
    }); 
    } 
    return filter_list; 
} 

app.component.html

<!-- Title --> 
<h2 class="title">Price Filter Pipe with Data Driven Form Approach</h2> 

<!-- Filter --> 
<zt-filter (filterPrice)='filterPrice($event)' ></zt-filter> 

<!-- Notification --> 
<div class="note" *ngIf="priceMinFilter || priceMaxFilter"> 
    <span *ngIf="priceMinFilter">Filtering Products from <strong>${{ priceMinFilter }}</strong></span> 
    <span *ngIf="priceMaxFilter"> to <strong>${{ priceMaxFilter }}</strong>.</span> 
</div> 

<!--Product List --> 
<div class="price-list"> 
    <div class="product-item" *ngFor="let _product of (_productList | priceFilter:priceMinFilter:priceMaxFilter)"> 
     <span class="name">{{ _product.name }}</span><span class="price">{{ _product.price | currency:'USD':true:'1.0-2' }}</span> 
    </div> 
</div>