angular - Angular2 Filtrera Data Från Lista

Jag utvecklar en Angular2-applikation med TypeScript. Jag behöver filtrera användare som motsvarar inmatningstextfältet.

Tabell efter filtrering av data

Inmatningsfält

Resultat

HTML-tabellvy users.html

<tr *ngFor='let user of Users'>
        <td>
            <img [src]='user.imageUrl' [title]='user.userName' [style.width.px]='imageWidth' [style.margin.px]='imageMargin'>
        </td>
        <td>{{ user.userName }}</td>
    </tr>

Användarlista user-list.componet.ts

export class UserListComponent implements OnInit {
    imageWidth: number = 50;
    imageMargin: number = 2;
    users: User[] = [
        {
            "productId": 2,
            "productName": "Njjosgaaj",
        }
    ];

    ngOnInit(): void {
        console.log('In OnInit');
    }
}

Användargränssnitt user.ts

export interface User {
    userId: number;
    userName: string;

}

Jag försökte utveckla detta med en anpassad Angular2-pipe. Jag undrar över utvecklingen? Vad är det bästa sättet att utveckla denna funktion?

Svar #1

Du kan använda en anpassad Angular-pipe för att filtrera användare.

Försök att lägga till den här typen av filter i din kod.

Skapa en ny fil som user-filter.ts och lägg till denna kod

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

import { User } from './user';

@Pipe({
    name: 'productFilter'
})
export class UserFilterPipe implements PipeTransform {

    transform(value: User[], filterBy: string): User[] {
        filterBy = filterBy ? filterBy.toLocaleLowerCase() : null;
        return filterBy ? value.filter((user: User) =>
            user.userName.toLocaleLowerCase().indexOf(filterBy) !== -1) : value;
    }
}

Lägg till listFilter-attributet till UserListComponent

 export class UserListComponent implements OnInit {

        listFilter: string = 'cart';
        --------------
    }

Byt till HTML-visning

<tr *ngFor='let user of Users | userFilter:listFilter '>
        <td>
            <img [src]='user.imageUrl' [title]='user.userName' [style.width.px]='imageWidth' [style.margin.px]='imageMargin'>
        </td>
        <td>{{ user.userName }}</td>
    </tr>