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

问题描述

ng-2 父子数据继承对我来说是一个难题.

ng-2 parent-child data inheritance has been a difficulty for me.

将我的总数据数组过滤为仅由单个父 ID 引用的子数据组成的数组，这似乎是一个很好的实用解决方案.换句话说:数据继承变成了一个父ID的数据过滤.

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.

在一个具体的例子中，这看起来像:过滤书籍数组以仅显示具有特定 store_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 对我来说是新的，但我认为我已经接近让事情在这里工作了.

TypeScript is new to me, but I think I am close to making things work here.

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

(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

推荐答案

你需要把你的代码放到 ngOnInit 并使用 this 关键字:

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);
}

您需要 ngOnInit 因为输入 store 不会被设置到构造函数中:

You need ngOnInit because the input store wouldn't be set into the constructor:

ngOnInit 在第一次检查指令的数据绑定属性后立即调用，并且在检查其任何子项之前.仅在指令实例化时调用一次.

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屋！