无法为角度自动完成模型指定值

Question

[解决了]

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

工作人员和比萨饼列表都是使用相应的服务从JSON接收的，然后我尝试应用过滤模型进行自动完成。

我在方法getData（）[app.component.ts]中设置了断点，而变量监视表明工作者和比萨饼变量都是未定义的。稍后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

原因是订阅也在初始化时执行，那时值为null。

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

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

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