Блог

Я хочу создать элемент управления формой автозаполнения углового материала с двумя способами фильтрации выбираемых параметров:

1. Способ по умолчанию, когда пользователь вводит ввод текста, и будут видны только параметры, соответствующие поисковому запросу, как в примерах на веб-сайте Angular Material.
2. Над компонентом автозаполнения находится элемент управления формой выбора категории. Когда выбрана категория, я хочу отображать только элементы в выбранной категории и разрешать пользователю выполнять поиск только в этих элементах с помощью ввода текста автозаполнения.

Вот мой код в классе компонентов:

 category = new FormControl(''); product = new FormControl(''); inwardForm = new FormGroup({  category: this.category,  product: this.product, });   ngOnInit(): void {  combineLatest([  this.inwardForm.get('product')!.valueChanges,  this.inwardForm.get('category')!.valueChanges,  ]).pipe(  startWith(['', undefined])  ).subscribe(result=gt;{  console.log(result);  });  }  

Моя проблема в том, что после инициализации компонента, когда я начинаю вводить компонент автозаполнения, ничего не происходит. После выбора категории в компоненте «Выбор категории» консоль.дровяные камины. После выбора категории, а затем ввода в консоль автозаполнения.журнал снова загорается при каждом нажатии клавиши.

Поэтому после выбора категории она работает так, как ожидалось, но я не хочу, чтобы выбор категории был обязательным. В чем может быть проблема?

На самом деле не имеет значения, к какому из них вы прикоснетесь в первый раз. combineLatest срабатывает только после того, как наблюдаемые объекты, определенные внутри, испускаются хотя бы один раз. В настоящее время ни один из них не излучает с самого начала, поэтому вам нужно взаимодействовать с ними обоими, чтобы просмотреть журнал консоли. Я вижу , что вы пытаетесь запустить его с помощью startWith , но startWith он должен быть на элементах управления формами, а не на combineLatest :

 ngOnInit(): void {  combineLatest([  this.inwardForm.get('product')!.valueChanges.pipe(startWith('')),  this.inwardForm.get('category')!.valueChanges.pipe(startWith('')),  ])  .subscribe((result) =gt; {  console.log(result);  }); }  

Хотя вы также можете просто прослушать родительскую форму, в этом не будет необходимости combineLatest :

 this.inwardForm.valueChanges.subscribe(values =gt; {  console.log(values.product, values.category); })  

Не забудьте отписаться!