Question

我正在尝试实现Material Autocomplete，并且在使它工作的同时，我试图确切地了解示例代码中的startWith运算符在做什么：

df = pd.DataFrame(zip(x*3, ["y"]*3+["z"]*3+["k"]*3, y+z+k), columns=["time", "kind", "data"])
plt.figure(figsize=(10, 6))
sns.barplot(x="time", hue="kind", y="data", data=df)
plt.show()

所以我看过的其他示例基本上都说startWith用于提供初始值，但是我不知道如何：

export interface User {
  name: string;
}

@Component({
  selector: 'autocomplete-display-example',
  templateUrl: 'autocomplete-display-example.html',
  styleUrls: ['autocomplete-display-example.css'],
})
export class AutocompleteDisplayExample implements OnInit {
  myControl = new FormControl();
  options: User[] = [
    {name: 'Mary'},
    {name: 'Shelley'},
    {name: 'Igor'}
  ];
  filteredOptions: Observable<User[]>;

  ngOnInit() {
    this.filteredOptions = this.myControl.valueChanges
      .pipe(
        startWith<string | User>(''),
        map(value => typeof value === 'string' ? value : value.name),
        map(name => name ? this._filter(name) : this.options.slice())
      );
  }

  displayFn(user?: User): string | undefined {
    return user ? user.name : undefined;
  }

  private _filter(name: string): User[] {
    const filterValue = name.toLowerCase();

    return this.options.filter(option => option.name.toLowerCase().indexOf(filterValue) === 0);
  }
}

正在这样做。救命，ELI5！

Answer 1

忽略通用类型<string | User>，而专注于传入参数的值。在您的代码中实际传递给startWith的值是一个空字符串''。

为什么要让它首先发出一个空值

在这种情况下，返回的observable（然后作为物料自动完成中的选项使用）具有一些起始值，可能按字母顺序排序，因此用户不必强制输入或打开下拉菜单以使第一次服务器端调用以获取一些可选值。

Documentation

StartWith

先发射指定的项目序列，然后再开始从源Observable发射项目

如果您希望Observable在开始发出通常期望的项目之前先发出特定的项目序列，请对它应用StartWith运算符。

示例/编辑

请参阅此stackblitz。在输出窗口中打开控制台，注意立即输出'Filtering on value '。现在，编辑组件打字稿文件，并用startWith注释掉该行，然后重新运行该应用程序。请注意，最初的console.log不会发出，如果您希望自动完成显示任何选项，则必须开始输入。

物料自动完成-startWith运算符

1 个答案:

Documentation

StartWith

示例/编辑