如何使用角度2中的 TypeScript 过滤数组？

Ng-2父子数据继承对我来说一直是个难题。

看起来可能是一个很好的实用解决方案，就是将我的数据总数组过滤到一个由单个父 ID 引用的唯一子数据组成的数组中。 换句话说: 数据继承变成了一个父 id 的数据过滤。

在一个具体的例子中，这可能类似于: 过滤一个图书数组，以便只显示具有某个 store_id的图书。

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 对我来说是新的，但是我想我已经接近让这些东西工作了。

(还可以选择覆盖原始图书数组，然后使用 *ngFor="#book of books"。)

剪辑 越来越接近了，但还是出现了错误。

//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
492233 次浏览
小开
最佳答案

您需要将代码放入 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)

在您的代码中，图书过滤被直接定义到类内容中..。

小开

你可以在这里查看 Plunker 的一个例子

filter() {


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

为了过滤一个与属性类型无关的数组(例如，对于所有属性类型) ，我们可以创建一个自定义过滤管道

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>

别忘了导入 app 模块中的管道

我们可能需要定制用日期进行归档的逻辑。


提交答案