无法将值分配给角度自动完成模型

Question

[已解决]

我有在自动完成输入表单（Angular 6/material）中使用数据模型时遇到问题。这是我的应用程序的片段：Stackblitz paste (just for general preview)

worker 和 Pizzas 列表都是使用相应的服务从 JSON 接收的，然后我尝试应用过滤模型来自动完成。

我在方法 getData() [app.component.ts] 中设置了断点，变量 watch 告诉 worker 和 Pizzas var 都是未定义的。 后来 this.workers.slice() 显然会抛出异常，它会阻止自动完成过滤操作。当我继续调试时，它不会再次调用此方法，而是以某种方式分配了数据，因此我的表单下的底部列表正确填充了来自 REST API 的数据。

我尝试了@NDDTConti 提供的解决方案，并在 valueChanges 触发时添加了一些条件，但它没有按预期工作。于是我又做了一些搜索，发现了这个博客：RxJS - if-else

替换较早的值更改定义后，它可以正常工作并且符合预期。 编辑片段：

this.filteredWorkers = this.workerCtrl.valueChanges
  .pipe(
    startWith(''),
    map((worker) => {
      let filteredOutput: Worker[];
      if (!this.workers || !this.workers.length) {
        return filteredOutput;
      } 
      else {
        worker ? filteredOutput = this._filterWorkers(worker) : this.workers.slice()
        return filteredOutput;
      }
    })
  );

Answer 1

原因是subscribe也是在初始化时执行的，当时值为null。

一个简单的解决方案是检查 valueChange 中的值是否为空。

我会使用这样的东西（此代码未经测试）：

 this.filteredPizzas = this.pizzaCtrl.valueChanges(k => {
    if (k.startWith('') && pizzas) k.map(pizza => pizza ? this._filterPizzas(pizza) : this.pizzas.slice())
  });