Question

我一直在做一些搜索，似乎有一些可能的解决方案。

第一个可能有效的方法：Filtering an array in angular2

但我发现使用管道和for循环并不理想。

我的想法是使用界面。

这将是打字稿解决方案。这里的问题是定义集合。

  public covers = COVERS;
  public images = VECTORS; // a BIG image collection
  imagesByCoverType: CoverVector = {}; // Array is made if 
  // I use Vector[]; but I wanted to use interface.

  // images are correctly filtered to the relevant ones. 
  ngOnInit() {
    this.imagesByCoverType = this.images.filter(
      image => image.type === 'book-cover');
  }

  // defined outside of the component class of course.
  interface CoverVector {
    [book_id: number]: Vector;
  }

<li *ngFor="let cover of covers")>

    <p>{{cover.title}}</p>

    <!-- Here I would like to print out a url to an image of an image object -->
    <!-- cover has a property book_id, and also a 
    chapter_id because the book is subdivided -->
    <!-- I was thinking something like this: -->
    <p>{{imagesByCoverType[cover.id].url}}</p>          

</li>

所以我想通过使用接口访问数组中的对象。我该怎么做呢？还考虑到我有一个过滤的矢量数组，它应该过去。

回顾清楚：我想要：

一大堆数据，其唯一标识符连接到＆＃39;界面＆＃39;或找到方法。
此界面应该可以输入此唯一ID并使用它访问所需的对象。
然后应该可以访问此对象的所有属性。或者实际上只是这种情况下的网址。要点：它应该存在，不仅仅是接口属性，而是任何所需的对象属性。
然后所有这些都优雅地包含在Angular 2 ngIf语句中。

我不会想到这个按字母排列的对象属性的东西会如此艰难，但这是一场斗争。

解决方案我目前正在使用

为什么我不得不求助于整个for循环只是为了访问一个我已经知道标识符的元素 - 来自它上面的for循环 - 但是我使用了一个自定义管道的for循环。

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

@Pipe({
  name: 'cover'
})
export class CoverVectorPipe{
  transform(value: any, cover_id: number) {
    return value.filter(
      (item: any)=> item.aim_id === cover_id);
    }
}

仍然欢迎使用界面解决此问题的任何帮助。

此外，我想知道这是否计算成本不高。

在Typescript / Angular 2中，如何通过对象的属性在数组中查找对象

0 个答案: