如何在Angular 2中用TypeScript过滤数组？ [英] How do I filter an array with TypeScript in Angular 2?

问题描述

对于我来说，ng-2亲子数据继承一直是个难题。

看起来可能是一个很好的实际解决方案，就是将我的整个数据数组过滤到只包含由一个父id引用的子数据的数组。
换句话说：数据继承成为一个父ID的数据过滤。

在一个具体的例子中，它可以看起来像这样：过滤书籍数组只显示具有特定 store_id 。
$ b

 从'angular2 / core'导入{Component，Input}; 
 
导出类商店{
 id：number; 
名称：string; 
} 
 
导出类Book {
 id：number; 
 shop_id：number; 
 title：string; 
 
 $ b @Component（{
 selector：'book'，
 template：`
< p>这些书应该有shop：{{shop.id}}：< / p> 
 
< p * ngFor =＃books of bookshop ID> {{book.title}}< / p> 
 $ b b））
导出类BookComponent {
 @Input（）
 store：Store; 
 
 public books =书籍; 
 
 //错误：书未定义
 //（当books.filter被调用时也不起作用：this.books.filter 
 //错误：无法读取未定义的属性过滤器）
 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。）

编辑
越来越近了，但仍然出现错误。

  //在顶部改变：
从'angular2 / core'导入{Component，Input，OnInit}; 
 
 //..omitted 
 
 //改变的组件：
导出类BookComponent实现OnInit {
 @Input（）
 store：商店; 
 
 public books =书籍; 
 
 //在ngInit 
所需的构造函数中添加数据//EXCEPTION：没有Array的提供者！ 
构造函数（
 booksByStoreID：Book []; 
）{} 
 
 $ b ngOnInit（）{
 this.booksByStoreID = this.books .filter（
 book => book.store_id === this.store.id）; 
 
 
 
 
 
 $ b $ div class =你需要把你的代码放到 ngOnInit 中，并使用这个关键字： 
 
 
  ngOnInit（）{
 this.booksByStoreID = this.books.filter（
 book = > book.store_id === this.store.id）; 
 
 $ / code> 
您需要 ngOnInit 因为输入 store 不会被设置到构造函数中： 
 
 
 
 
  ngOnInit 在第一次检查伪指令的数据绑定属性之后，在其任何子项被检查之前调用。它只在实例化指令时调用一次。
 
 
（ https://angular.io/docs/ts/latest/api/core/index/OnInit-interface.html  
 
 
在您的代码中，图书过滤是直接定义到类内容中的。
 
ng-2 parent-child data inheritance has been a difficulty for me. 

What seems that could be a fine working practical solution is filtering my total array of data to an array consisting of only child data referenced by a single parent id.
In other words: data-inheritance becomes data filtering by one parent id. 

In a concrete example this can look like: filtering a books array to only show the books with a certain 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 is new to me, but I think I am close to making things work here.

(Also overwriting the original books array could be an option, then using *ngFor="#book of books".)

EDIT
Getting closer, but still giving an error.
//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

解决方案
You need to put your code into ngOnInit and use the this keyword:
ngOnInit() {
  this.booksByStoreID = this.books.filter(
          book => book.store_id === this.store.id);
}
You need ngOnInit because the input store wouldn't be set into the constructor:

  
ngOnInit is called right after the directive's data-bound properties have been checked for the first time, and before any of its children have been checked. It is invoked only once when the directive is instantiated.
(https://angular.io/docs/ts/latest/api/core/index/OnInit-interface.html)

In your code, the books filtering is directly defined into the class content...

                        
这篇关于如何在Angular 2中用TypeScript过滤数组？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！