Автозаполнение материала - запуск с оператором

Question

Я пытаюсь реализовать автозаполнение материала, и пока оно работает, я пытаюсь точно выяснить, что делает оператор 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);
  }
}

Так что другойПримеры, на которые я смотрел, в основном говорят, что startWith используется для предоставления начального значения, но я не понимаю, как:

 startWith<string | User>(''),

делает это.Помогите, ELI5!

Answer 1

Игнорировать универсальный тип <string | User> и сосредоточиться на значении переданного параметра.Значение, которое фактически передается в startWith в вашем коде, является пустой строкой ''.

почему вы хотите, чтобы оно сначала выдало пустое значение

В этом случае, чтобы возвращаемая наблюдаемая (которая затем использовалась в качестве параметров в автозаполнении материала) имела некоторые начальные значения, предположительно отсортированные по алфавиту, чтобы пользователю не пришлось начинать вводить текст или открывать раскрывающийся список, чтобы сделать первую сторону серверавызов, чтобы получить некоторые выбираемые значения.

---

Документация

StartWith

испускает указанную последовательность элементов перед началом испусканияэлементы из источника Observable

Если вы хотите, чтобы Observable испускал определенную последовательность элементов до того, как он начинает испускать элементы, обычно ожидаемые от него, примените к нему оператор StartWith.

Пример / Редактировать

См. stackblitz .Откройте консоль в окне вывода и обратите внимание на немедленный вывод 'Filtering on value '.Теперь отредактируйте файл машинописи компонентов и закомментируйте строку с startWith и перезапустите приложение.Обратите внимание, что начальный console.log не выдается, и если вы хотите, чтобы в автозаполнении отображались какие-либо параметры, вы должны начать печатать.