我想通過兩種方式創建一個 Angular Material Autocomplete 表單控制元件來過濾可選選項：
- 默認方式，當用戶輸入文本時，只有匹配搜索詞的選項是可見的，就像 Angular Material 網站上的例子一樣。
- 在自動完成組件上方有一個類別選擇表單控制元件。選擇類別時，我只想顯示所選類別中的元素，并允許用戶僅使用自動完成文本輸入在這些元素中進行搜索。
這是我在組件類中的代碼：
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=>{
console.log(result);
});
}
我的問題是，在初始化組件后，當我開始輸入自動完成組件時，沒有任何反應。在類別選擇組件中選擇一個類別后，console.log 會觸發。選擇類別后，然后鍵入自動完成功能，每次擊鍵時都會再次觸發 console.log。
所以在選擇一個類別后，它會按預期作業，但我不希望類別選擇是強制性的。可能是什么問題呢？
uj5u.com熱心網友回復：
其實你第一次接觸哪個并不重要。combineLatest只有在內部定義的 observables 至少發出一次后才會觸發。目前兩者都沒有從一開始就發出，因此您需要與它們進行互動以查看控制臺日志。我看到您正在嘗試使用 啟動它startWith，但startWith需要在表單控制元件上而不是combineLatest：
ngOnInit(): void {
combineLatest([
this.inwardForm.get('product')!.valueChanges.pipe(startWith('')),
this.inwardForm.get('category')!.valueChanges.pipe(startWith('')),
])
.subscribe((result) => {
console.log(result);
});
}
雖然您也可以只聽父表單，但不需要combineLatest：
this.inwardForm.valueChanges.subscribe(values => {
console.log(values.product, values.category);
})
記得退訂哦！
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/375451.html
標籤：javascript 有角的 打字稿 角材料
上一篇：是否有像演示一樣的PrimeNG表（p表）的作業列過濾器示例？
下一篇：如何以角度撰寫界面