Question

[已解决]

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

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

我已经在方法getData（）[app.component.ts]中设置了断点，并且变量watch告诉我们worker和pizza vars都未定义。稍后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中的值是否为空。

我会使用类似的代码（未经测试的代码）：

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

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

1 个答案: