带有过滤器的Angular Async显示服务器数据

Question

我可以通过httpClient.get方法很好地显示服务器数据，但是一旦使用过滤器，某些检索到的Master []对象就不会显示出来。我需要继续在过滤器输入字段中输入内容，以便最终将它们全部显示出来。

我用于获取服务器数据的Typescript代码：

export class MastersComponent implements OnInit {
  newMasters: Observable < Array < NewMaster >> ;
  filterString: string;
  constructor(private dataService: DataService) {}

  ngOnInit() {
    console.log("Masters initialisiert");
    this.newMasters = this.dataService.getMastersShort();
  }

  passedFilter(newMaster: NewMaster, deviceProp = "DeviceId", filterString = this.dataService.inputFilter) {
    if (newMaster[deviceProp].toLowerCase().includes(filterString.toLowerCase()) || filterString === "") {
      return true;
    } else {
      return false;
    }
  }

}

在我检索数据的Masters Component.ts中：

<div class="row justify-content-center" style="margin-bottom: 30px;">
  <div *ngFor="let master of newMasters | async">
    <div *ngIf="passedFilter(master)">
      <div class="col-sm-4">
        <app-master [master]="master">
        </app-master>
      </div>
    </div>
  </div>
</div>

最后一个是Masters Component HTML，我尝试使用异步管道来解决我的问题：

{{1}}

以下是一些显示我的问题的图像：
My Masters after initialization
My Masters with applied filter
My Master after filter was removed
当我继续按退格键（即使过滤器中不再有卡通人物）时，页面将加载所有母版，并解析为第一张图所示的状态。