In Typescript/Angular 2 how to find an object in an array by a property of the object

Question

I've been doing some searching and there seem to be a few possible solutions.

First one that will probably work: Filtering an array in angular2

but I find using a pipe and a for loop not ideal.

My idea was using an interface.

This would be a typescript solution. Problem here is defining the collection.

  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>

So I want to access an object in an array by using an interface. How do I do this? Considering also that I have a filtered array of vectors that it should go over.

Recap for clarity: I want:

1. A big collection of data that has a unique identifier connected to an 'interface' or find method.

2. This interface should make it possible to input this unique id and access with it the desired object.

3. Then all properties of this object should be accessible. Or actually only the url in this case. Point being: it should be there, not just the interface property, but any desired object property.

4. Then all this elegantly wrapped up in a Angular 2 ngIf statement.

I wouldn't have thought this in-array-find-by-object-property thing would be so hard but it's been a struggle.

Solution I am currently using

It's beyond me why I have to resort to a entire for loop just to access one element I already know the identifier of - from a for loop above it - but I used a for loop using a custom pipe.

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

Any help solving this using an interface is still welcome.

Also I am wondering if this isn't computationally expensive.