filterを使う｜AngularでWebサイト作成

ntuti

filterを使う｜AngularでWebサイト作成

Angularの学習の為に、AngularでWebサイトを作ってみることにしました（Angularのバージョンは4.3.6です）。
適宜作業内容をまとめていきます。

基本的な部分は公式チュートリアルなどを参考にしながら進めています。

AngularでWebサイトを作成していく場合、一覧表示を行った際にfilter機能を使うことができます（簡単な絞り込みに使えます）。
今回は、このfilterの簡単な例を作成してみたいと思います。

開発環境

・OS：Windows8.1 64bit
・node：v7.2.1
・npm：4.0.5
・Angular：4.3.6
・開発ツール：VisualStudioCode

手順

手順1.一覧表示テンプレートの作成

メンバー一覧画面（memberlistコンポーネント）を想定して考えます。
まずはmemberlistコンポーネントを以下のように作成します。

memberlist.component.html

<table id="contents" class="table">
    <tr>
        <th>ID</th>
        <th>メンバ名</th>
    </tr>
    <tr *ngFor="let member of Members">
        <td>{{member.id}}</td>
        <td><a [routerLink]="['/member', member.id]">{{member.name}}</a></td>
    </tr>
</table>

member.ts

export class Member {
    id:number
    name:string
}

memberlist.component.ts

export class MemberListComponent implements OnInit {
    members: Member[]
    ～省略～
    ngOnInit() {
        this.getMembers()
    }
    getMembers(): void {
        this.memberService.getMembers()
        .then((members: Member[]) => {
            this.members = members
        });
    }
    ～省略～
}

member.service.ts

@Injectable()
export class MemberService {
        ～省略～
    getMembers(): Promise<Member[]> {
        return this.http.get(this.membersUrl).toPromise()
        .then((response: Response) => response.json().data as Member[])
        .catch();
    }
        ～省略～
}

※serviceのgetリクエストでAPI側からMember配列型のjsonを返すよう、API実装しておく必要があります。

手順2.filterを使う

手順1で一覧表示ができるようになったら、次にfilterを実装していきましょう。
memberlist.component.tsを以下のように変更します。

memberlist.component.ts

export class MemberListComponent implements OnInit {
    members: Member[]
    ～省略～
    ngOnInit() {
        this.getMembers()
    }
    getMembers(): void {
        this.memberService.getMembers()
        .then((members: Member[]) => {
            this.members = members.filter((_member: Member) => { //filterを使う
                return _member.id !== 1; //idが1以外のものを表示する。
        });
    }
    ～省略～
}