角2價格過濾管 - 無法讀取屬性'0'的未定義

Question

我想創建一個價格過濾器，基於兩個變量過濾掉產品。這兩個變量是最低價格和最高價格。

目前我只實現了最低價格，使事情更容易理解。但是在* ngFor指令之後添加| priceFilter:priceMinFilter管道時，出現此「Cannot read property '0' of undefined」錯誤。

我試圖讓我的頭圍繞這個問題，任何人都可以給一些建議或告訴我我在這裏做錯了什麼？謝謝。

這裏是一個普拉克：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 omponent.html

<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; 
    }); 
    } 
} 

你謝謝！

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>