在Angular 2中搜索管道

Question

我的垫子上有名字（rooms） 我还有一个input，我希望能够搜索这些项目。这是我的代码：

<div id="room-list-container">
  <h1>Room-list-view here</h1>
  <h1>
    This buildingID is
    <b> {{buildingID}}. </b> This data is fetched from url
  </h1>
  <mat-form-field class="demo-full-width">
    <input matInput placeholder="Search" >
  </mat-form-field>
  <mat-card *ngFor="let room of arr">
    <mat-card-content>
      <h3>Room Number: {{room}}</h3>
      <p>Room Freetime: data comes later </p>
    </mat-card-content>
    <mat-card-actions>
      <button mat-raised-button (click)="test()" color="accent">Check this room</button>
    </mat-card-actions>
  </mat-card>
</div>

因此，如果用户在输入中键入内容（例如 - 房间数） - 列表会更改，并且会显示正确的房间。

我想我需要使用自定义Pipe之类的东西来做，我尝试了很多例子，但是没有人工作，请你告诉我如何解决它？