Góc 2 - ngFor chỉ số sau một đường ống

Question

Trong Góc 2 khi sử dụng ngFor làm cách nào để lấy chỉ mục gốc cho một đối tượng trong một mảng sau khi nó được truyền qua một đường ống?

Ví dụ nếu tôi có một mảng các đối tượng như sau:

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

Và bằng cách sử dụng ống sau:

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

tôi tạo ra một ngFor như sau:

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

Vấn đề ở đây là chỉ số trả về bởi ngFor được dựa trên mảng mới được trả về bởi AppFilter đó là chỉ số 0 và 1. Th sẽ làm cho trường đầu vào tham chiếu sai chỉ mục tức là nó sẽ hiển thị đối tượng kiểu A vì nó tương ứng với chỉ mục 0,1 trong danh sách gốc. Để có được loại B tôi thực sự cần chỉ số 2,4.

Đánh giá cao công việc xung quanh việc này. Cũng trackByIndex tôi trong thành phần hiện trông giống như:

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

Answer 1

Bạn cũng có thể sử dụng reduce phương pháp để giữ chỉ số ban đầu:

@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, []); 
    } 
} 

và sau đó trong html

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

Plunker Example

Answer 2

Nếu tôi hiểu bạn một cách chính xác bạn muốn chỉ số của danh sách ban đầu, trong trường hợp đó bạn có thể sử dụng đối tượng được lọc để tìm hiểu chỉ số có nguồn gốc từ danh sách ban đầu.

<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> 

và sau đó xác định phương pháp geIndex trong thành phần bạn có thể trả về Chỉ mục từ danh sách gốc chưa được lọc.

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