ऑब्जेक्ट प्रॉपर्टी स्ट्रिंग

Question

पर आधारित "ngFor" लूप के अंदर आइटम्स को फ़िल्टर करने के लिए कैसे करें, मुझे ड्रॉप-डाउन सूची में श्रेणी बदलकर ngFor लूप के अंदर आइटम फ़िल्टर करने की आवश्यकता है। इसलिए, जब सूची से कोई विशेष श्रेणी चुनी जाती है, तो उसे केवल उसी श्रेणी वाले आइटम सूचीबद्ध करना चाहिए।

एचटीएमएल टेम्पलेट:

<select> 
    <option *ngFor="let model of models">{{model.category}}</option> 
</select> 

<ul class="models"> 
    <li *ngFor="let model of models" (click)="gotoDetail(model)"> 
    <img [src]="model.image"/> 
    {{model.name}},{{model.category}} 
    </li> 
</ul> 

आइटम सरणी:

export var MODELS: Model[] = [ 
{ id: 1, 
    name: 'Model 1', 
    image: 'img1', 
    category: 'Cat1', 
}, 

{ id: 2, 
    name: 'Model 2', 
    image: 'img2', 
    category: 'Cat3', 
}, 

{ id: 3, 
    name: 'Model 3', 
    image: 'img3', 
    category: 'Cat1', 
}, 
{ id: 4, 
    name: 'Model 4', 
    image: 'img4', 
    category: 'Cat4', 
}, 

... 
]; 

इसके अलावा, ड्रॉप-डाउन सूची दोहराया शामिल श्रेणी नाम। इसके लिए केवल अद्वितीय श्रेणियों (तार) को सूचीबद्ध करना आवश्यक है।

मुझे पता है कि कस्टम पाइप बनाना यह करने का सही तरीका होगा, लेकिन मुझे नहीं पता कि एक कैसे लिखना है।

Plunker: http://plnkr.co/edit/tpl:2GZg5pLaPWKrsD2JRted?p=preview

Answer 1

यहां नमूने के पाइप है:

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({ 
    name: 'matchesCategory' 
}) 
export class MathcesCategoryPipe implements PipeTransform { 
    transform(items: Array<any>, category: string): Array<any> { 
     return items.filter(item => item.category === category); 
    } 
} 

इसका इस्तेमाल करने के लिए: plunkr उदाहरण के लिए

<li *ngFor="let model; of models | matchesCategory:model.category" (click)="gotoDetail(model)"> 

===== ====

कुछ परिवर्तनीय

में प्रतिबिंबित करने के लिए आपको अपने चयन परिवर्तनों की आवश्यकता है

सबसे पहले अपनी कक्षा में एक सदस्य को परिभाषित:

selectedCategory: string; 

तो अद्यतन अपने टेम्पलेट:

<select (change)="selectedCategory = $event.target.value"> 
    <option *ngFor="let model of models ">{{model.category}}</option> 
</select> 

पिछले, पाइप का उपयोग करें:

<li *ngFor="let model; of models | matchesCategory:selectedCategory" (click)="gotoDetail(model)"> 

==== टिप्पणियों को देखने के बाद plunker ====

मैंने देखा कि आपने वादा किया था। कोणीय 2 अधिक आरएक्सजे उन्मुख है। तो पहली बात मैं बदल देंगे आपकी सेवा में है, की जगह:

getModels(): Promise<Model[]> { 
    return Promise.resolve(MODELS); 
} 

रहे हैं:

getModels(): Observable<Array<Model>> { 
    return Promise.resolve(MODELS); 
} 

और

getModels(id: number): Observable<Model> { 
    return getModels().map(models => models.find(model.id === id); 
} 

तो

अपने ModelsComponent

models$: Observable<Array<Model>> = svc.getModels(); 
uniqueCategories$: Observable<Array<Model>> = this.models$ 
    .map(models => models.map(model => model.category) 
    .map(categories => Array.from(new Set(categories))); 

में आपके विकल्प बन जाएंगे:

 <option *ngFor="let category; of uniqueCategories$ | async">{{model.category}}</option> 

और अपनी सूची:

 <li *ngFor="let model; of models$ | async | matchesCategory:selectedCategory" (click)="gotoDetail(model)"> 

यह एक बहुत ही हवादार समाधान है जब से तुम कई डुप्लिकेट है और आप सेवा की क्वेरी रहते हैं।इसे एक शुरुआती बिंदु के रूप में लें और केवल एक बार सेवा पूछें, फिर आपके द्वारा प्राप्त परिणाम से विशिष्ट मान प्राप्त करें।

यदि आप कोड रखना चाहते हैं, तो बस एक अनन्य वैल्यूजइप लागू करें, इसके ट्रांसफॉर्म को एक पैरामीटर मिलेगा और इसे Array.from(new Set(...)) का उपयोग करके अद्वितीय श्रेणियों को वापस करने के लिए फ़िल्टर करें। आपको इसे तारों (श्रेणियों) में पहले मैप करने की आवश्यकता होगी।