कोणीय 2 - एक पाइप के बाद एनजीएफआर सूचकांक

Question

अंगुलर 2 में जब ngFor का उपयोग करते हैं तो मुझे एक पाइप के माध्यम से एक सरणी के भीतर किसी ऑब्जेक्ट के लिए मूल अनुक्रमणिका कैसे प्राप्त होगी?

उदाहरण के लिए अगर मैं वस्तुओं की एक सरणी है इस प्रकार है:

list = [{type:"A",id:111},{type:"A",id:222},{type:"B",id:333},{type:"A",id:444},{type:"B",id:555}]; 

और निम्नलिखित पाइप का उपयोग कर:

@Pipe({ 
    name: 'appFilter', 
    pure: false 
}) 
export class AppFilterPipe implements PipeTransform { 
// Single Argument Filter 
    transform(values: any[], arg1: any, arg2: any): any { 
    return values.filter(value => value[arg1] === arg2); 
    } 
} 

मैं एक ngFor बनाने इस प्रकार है:

<div *ngFor= "let item of list|AppFilter:'type':'B'|let index=index;trackBy:trackByIndex;"> 
{{index}} - {{item.id}} 
<input [(ngModel)]="list[index]" placeholder="item"> 
</div> 

यहां मुद्दा यह है कि ngFor द्वारा लौटाई गई इंडेक्स ऐपफिल्टर द्वारा लौटाई गई नई सरणी पर आधारित है जो सूचकांक 0 और 1. है इनपुट फ़ील्ड को गलत इंडेक्स का संदर्भ देने का कारण बन जाएगा यानी यह ए ऑब्जेक्ट्स दिखाएगा क्योंकि यह मूल सूची में इंडेक्स 0,1 से मेल खाता है। टाइप बी प्राप्त करने के लिए मुझे वास्तव में सूचकांक 2,4 की आवश्यकता है।

इस के आसपास एक काम की सराहना करें। इसके अलावा घटक में मेरी trackByIndex वर्तमान में लगता है कि:

trackByIndex(index: number, obj: any): any { 
    return index; 
    } 

Answer 1

तुम भी reduce विधि का उपयोग कर सकते हैं मूल सूचकांक रखने के लिए: html में

@Pipe({ 
    name: 'appFilter', 
    pure: false 
}) 
export class AppFilterPipe implements PipeTransform { 
    transform(values: any[], arg1: any, arg2: any): any { 
    return values.reduce((acc, value, index) => 
     value[arg1] === arg2 ? [...acc, { index, value }] : acc, []); 
    } 
} 

और फिर

{{item.index}} - {{item.value.id}} 

Plunker Example

Answer 2

तो मैं तुम्हें सही ढंग से समझ में आ आप मूल सूची के सूचकांक, उस मामले में आप जिसे फ़िल्टर वस्तु का उपयोग कर सकते मूल सूची से मूल सूचकांक पता लगाना चाहते हैं।

<div *ngFor= "let item of list|appFilter:'type':'B'|let index=index;trackBy:trackByIndex;"> 
{{getIndex(iteml)}} - {{item.id}} 
    <input [(ngModel)]="list[getIndex(item)].id" placeholder="item"> 
</div> 

और फिर आपके घटक में geIndex विधि को परिभाषित करें जो मूल सूची से इंडेक्स वापस कर सकता है जिसे फ़िल्टर नहीं किया गया है।

getIndex(item: Item) { 
    return this.list.indexOf(this.list.filter((i, index) => item.id == i.id)[0]) 
}