Angular 如何获得过滤（使用管道）列表？

我有一个要过滤的管道：

@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(items: Array<any>, filter: { [key: string]: any }): Array<any> {
    return items.filter(item => {
        let notMatchingField = Object.keys(filter)
            .find(key => item[key] !== filter[key]);
        return !notMatchingField; // true if matches all fields
    });
}


}

---

所以我运行它，我得到的所有对象的名称都是'Gülcan'在我的表中。但我在另一个页面中写道：

console.log（this.\u FilteredList）

我看到了该列表中的所有项目。是否仍要仅查看那些已筛选的项目？

请尝试使用此代码进行筛选。这对我很有用：

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

@Pipe({
    name: 'filterPipe'
})
export class FilterPipe implements PipeTransform {
    transform(data: any[], keys: string[], filter: string) {
        if (!filter || !keys || keys.length <= 0) {
            return data;
        } else {
            return data.filter((elem) => {
                var matched = false;
                for (let key of keys) {
                    matched = matched || elem[key].toLocaleLowerCase().indexOf(filter.toLocaleLowerCase()) !== -1
                    if (matched) {
                        return true;
                    }
                }
                return matched;
            });
        }
    }
}

从'@angular/core'导入{Pipe，PipeTransform}；
@烟斗({
名称：'filterPipe'
})
导出类FilterPipe实现PipeTransform{
转换（数据：任意[]，键：字符串[]，筛选器：字符串）{
如果（！filter | |！keys | | keys.length{
var匹配=假；
对于（让钥匙中的钥匙）{
matched=matched | | elem[key].toLocaleLowerCase（）.indexOf（filter.toLocaleLowerCase（））！=-1
如果（匹配）{
返回true；
}
}
返回匹配；
});
}
}
}

更新 HTML:

---

尝试将此代码用于过滤器。这对我很有用：

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

@Pipe({
    name: 'filterPipe'
})
export class FilterPipe implements PipeTransform {
    transform(data: any[], keys: string[], filter: string) {
        if (!filter || !keys || keys.length <= 0) {
            return data;
        } else {
            return data.filter((elem) => {
                var matched = false;
                for (let key of keys) {
                    matched = matched || elem[key].toLocaleLowerCase().indexOf(filter.toLocaleLowerCase()) !== -1
                    if (matched) {
                        return true;
                    }
                }
                return matched;
            });
        }
    }
}

从'@angular/core'导入{Pipe，PipeTransform}；
@烟斗({
名称：'filterPipe'
})
导出类FilterPipe实现PipeTransform{
转换（数据：任意[]，键：字符串[]，筛选器：字符串）{
如果（！filter | |！keys | | keys.length{
var匹配=假；
对于（让钥匙中的钥匙）{
matched=matched | | elem[key].toLocaleLowerCase（）.indexOf（filter.toLocaleLowerCase（））！=-1
如果（匹配）{
返回true；
}
}
返回匹配；
});
}
}
}

更新 HTML:

---

过滤器不会更改源数组。它将生成另一个数组，然后在模板中呈现该数组。目前还没有办法访问它，但另一方面，我认为这不是真的必要。如果在代码中需要过滤数组，只需将其放在那里，并在模板中呈现，而不是在原始模板中呈现

所以，你想要的是这样的：

应用程序组件.ts

import {Component} from '@angular/core';
import {AppFilter} from './filter.pipe';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    items: any[] = [];
    filteredItems: any[] = [];
    private _filterId: string;
    get filterId(): string {
        return this._filterId;
    }
    set filterId(val: string) {
        this._filterId = val;
        this.filteredItems = this.filter.transform(this.items, {id: val});
    }
    constructor(private filter: AppFilter) {
        this.items = [
            {
                id: '1',
                text: 'item 1'
            },
            {
                id: '2',
                text: 'item 2'
            }
        ];
        this.filterId = '1';
    }
}

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {AppFilter} from './filter.pipe';

@NgModule({
    declarations: [
        AppComponent,
        AppFilter
    ],
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule
    ],
    providers: [AppFilter], // <--- !!! it must be provided by some component or module
    bootstrap: [AppComponent]
})
export class AppModule {
}

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

@Pipe({
    name: 'filter'
})
export class AppFilter implements PipeTransform {
    transform(value: any, filter: {[key: string]: any}): any {
        if (!value || !filter) {
            return value;
        }
        return value.filter(item => {
            return !Object.keys(filter).find(key => filter[key] && (item[key] !== filter[key]));
        });
    }
}

app.component.html

<div>
    <input type="text" [(ngModel)]="filterId" />
    <div *ngFor="let item of filteredItems">{{item.text}}</div>
</div>

---

筛选器不会更改源数组。它将生成另一个数组，然后在模板中呈现该数组。目前还没有办法访问它，但另一方面，我认为这不是真的必要。如果在代码中需要过滤数组，只需将其放在那里，并在模板中呈现，而不是在原始模板中呈现

所以，你想要的是这样的：

应用程序组件.ts

import {Component} from '@angular/core';
import {AppFilter} from './filter.pipe';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    items: any[] = [];
    filteredItems: any[] = [];
    private _filterId: string;
    get filterId(): string {
        return this._filterId;
    }
    set filterId(val: string) {
        this._filterId = val;
        this.filteredItems = this.filter.transform(this.items, {id: val});
    }
    constructor(private filter: AppFilter) {
        this.items = [
            {
                id: '1',
                text: 'item 1'
            },
            {
                id: '2',
                text: 'item 2'
            }
        ];
        this.filterId = '1';
    }
}

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

import {AppComponent} from './app.component';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {AppFilter} from './filter.pipe';

@NgModule({
    declarations: [
        AppComponent,
        AppFilter
    ],
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule
    ],
    providers: [AppFilter], // <--- !!! it must be provided by some component or module
    bootstrap: [AppComponent]
})
export class AppModule {
}

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

@Pipe({
    name: 'filter'
})
export class AppFilter implements PipeTransform {
    transform(value: any, filter: {[key: string]: any}): any {
        if (!value || !filter) {
            return value;
        }
        return value.filter(item => {
            return !Object.keys(filter).find(key => filter[key] && (item[key] !== filter[key]));
        });
    }
}

app.component.html

<div>
    <input type="text" [(ngModel)]="filterId" />
    <div *ngFor="let item of filteredItems">{{item.text}}</div>
</div>

---

对不起，忘记HTML了。更新在您的更新之前有错误，现在错误消失了。但它现在不过滤对不起，忘记HTML了。更新在您的更新之前有错误，现在错误消失了。但是它现在不过滤。强烈建议您不要像这里讨论的那样使用管道进行过滤和排序：而是在组件类中进行过滤。这里有一个例子：强烈建议不要像这里讨论的那样使用管道进行过滤和排序：而是在组件类中进行过滤。我举了一个例子：