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


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以外のものを表示する。
        });
    }
    ~省略~
}

filterで条件をつけることで、表示するmemberの条件を指定することができるようになります。
上記の例ではidが1以外のmemberが表示されるようになります。

感想

filterは簡単に実装できますが、複数条件の組み合わせなどには向いていないような気もします。
より良い方法を調べていきたいと思います。

  • このエントリーをはてなブックマークに追加

PAGE TOP