web-dev-qa-db-ja.com

TypeScriptで配列をフィルタするにはどうすればいいですか？ Angular 2？

ng-2親子データの継承は私にとって困難でした。

うまく機能する実用的な解決策と思われるのは、私のデータ配列全体を、単一の親IDで参照される子データのみで構成される配列にフィルタリングすることです。つまり、データ継承は、1つの親IDによるデータフィルタリングになります。

具体的な例では、これは次のようになります。特定のstore_idを持つ本だけを表示するようにbooks配列をフィルタリングします。

import {Component, Input} from 'angular2/core';

export class Store {
  id: number;
  name: string;
}

export class Book {
  id: number;
  shop_id: number;
  title: string;
}

@Component({
  selector: 'book',
  template:`
    <p>These books should have a label of the shop: {{shop.id}}:</p>

    <p *ngFor="#book of booksByShopID">{{book.title}}</p>
  `
])
export class BookComponent {
  @Input()
  store: Store;

  public books = BOOKS;

  // "Error: books is not defined"
  // ( also doesn't work when books.filter is called like: this.books.filter
  // "Error: Cannot read property 'filter' of undefined" )
  var booksByStoreID = books.filter(book => book.store_id === this.store.id)
}

var BOOKS: Book[] = [
  { 'id': 1, 'store_id': 1, 'name': 'Dichtertje' },
  { 'id': 2, 'store_id': 1, 'name': 'De uitvreter' },
  { 'id': 3, 'store_id': 2, 'name': 'Titaantjes' }
];

TypeScriptは私にとっては初心者ですが、ここでうまくいくようにすることに近いと思います。

（また、オリジナルのbooks配列を上書きすることもできます。その場合は*ngFor="#book of books"を使用します。）

_ edit _ 近づいてもエラーが発生します。

//changes on top:
import {Component, Input, OnInit} from 'angular2/core';

// ..omitted

//changed component:
export class BookComponent implements OnInit {
  @Input() 
  store: Store;

  public books = BOOKS;

  // adding the data in a constructor needed for ngInit
  // "EXCEPTION: No provider for Array!"
  constructor(
    booksByStoreID: Book[];
  ) {}


  ngOnInit() {
    this.booksByStoreID = this.books.filter(
      book => book.store_id === this.store.id);
  }
}

// ..omitted
arraysfiltertypescriptangular
83
Code-MonKy

あなたのコードをngOnInitに入れてthisキーワードを使う必要があります。

ngOnInit() {
  this.booksByStoreID = this.books.filter(
          book => book.store_id === this.store.id);
}

入力ngOnInitはコンストラクタに設定されないため、storeが必要です。

ngOnInit は、ディレクティブのデータバインドプロパティが初めてチェックされた直後、およびその子のいずれかがチェックされる直前に呼び出されます。ディレクティブがインスタンス化されるときに一度だけ呼び出されます。

（ https://angular.io/docs/ts/latest/api/core/index/OnInit-interface.html ）

あなたのコードでは、本のフィルタリングはクラスの内容に直接定義されています...

145
Thierry Templier

ここでPlunkerの例をチェックできます plunker example filters

filter() {

    let storeId = 1;
    this.bookFilteredList = this.bookList
                                .filter((book: Book) => book.storeId === storeId);
    this.bookList = this.bookFilteredList; 
}
11
yaircarreno

プロパティタイプに関係なく（つまり、すべてのプロパティタイプに対して）配列をフィルタ処理するために、カスタムフィルタパイプを作成できます。

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

@Pipe({ name: "filter" })
export class ManualFilterPipe implements PipeTransform {
  transform(itemList: any, searchKeyword: string) {
    if (!itemList)
      return [];
    if (!searchKeyword)
      return itemList;
    let filteredList = [];
    if (itemList.length > 0) {
      searchKeyword = searchKeyword.toLowerCase();
      itemList.forEach(item => {
        //Object.values(item) => gives the list of all the property values of the 'item' object
        let propValueList = Object.values(item);
        for(let i=0;i<propValueList.length;i++)
        {
          if (propValueList[i]) {
            if (propValueList[i].toString().toLowerCase().indexOf(searchKeyword) > -1)
            {
              filteredList.Push(item);
              break;
            }
          }
        }
      });
    }
    return filteredList;
  }
}

//Usage

//<tr *ngFor="let company of companyList | filter: searchKeyword"></tr>

アプリモジュールにパイプをインポートすることを忘れないでください

日付を使ってファイラーのロジックをカスタマイズする必要があるかもしれません。

1
alchi baucha