角度垫子-选择-搜索可重用下拉组件，如何控制传递的对象数组和控制函数的执行?

Question

我在Angular ngx-mat-select-search Custom Component和ngx-mat-select-search文档的文章的帮助下实现了具有实时搜索功能的mat-select-search组件。它工作正常，直到给它动态数据。

在子组件中，我正在获取对象数组

@Input() sites: any[];

并且这个数组正在被另一个函数使用

export class SiteDropdownComponent<T> implements OnInit, OnDestroy, AfterViewInit {    

ngOnInit(): void {
// set initial selection
this.siteCtrl.setValue(this.sites[1]);
// load the initial site list
this.filteredSites.next(this.sites.slice());
// listen for search field value changes
this.siteFilterCtrl.valueChanges
.pipe(takeUntil(this.onDestroy))
.subscribe(() => {
this.filterSites();
});}}

我在父组件中使用它

<app-site-dropdown [siteCtrl]="sitesForm.get('site')" [sites]="sites" (sel)="changeCoun($event)"></app-site-dropdown>

如果我给对象

export class AppComponent implements OnInit, AfterViewInit, OnDestroy {`  
sites: any[] = [
{id: 'item1', name: 'item1'},
{id: 'item2', name: 'item2'},
{id: 'item3', name: 'item3'}
]; 

它工作正常，但是如果我通过向服务器发送请求来为站点提供数组，以这种格式延迟处理请求

getSitesList() {
this.subs.add(this.http.post(this.count, 'url/listSites').subscribe(data => {
this.sites = data.sites;
console.log(this.sites);
}));

在延迟期间，SiteDropdown组件正在呈现并给出错误站点未定义无法使用函数，因为站点尚未加载

ngOnInit() {
// set initial selection
this.siteCtrl.setValue(this.sites[1]);
// load the initial site list
this.filteredSites.next(this.sites.slice());
}

有没有解决这个问题的最佳方法或功能？调用函数这些函数代码的另一部分，我不确定setTimeOut()。SiteDropdownComponent在上面给出的链接中详细介绍。

Answer 1

您可以使用*ngIf来确保仅在设置sites时才加载站点下拉列表。

<app-site-Dropdown *ngIf="sites" [siteCtrl]="sitesForm.get('site')" [sites]="sites" (sel)="changeCoun($event)"></app-site-dropdown>

要了解有关Ngif的更多信息，请查看其 文档。

---

否则，不初始化站点数组也可能是一个问题。 如果您通过请求设置数据，则必须在以下之前初始化数组：

sites: any[] = [];

Answer 2

你也可以使用二传手

export class SiteDropdownComponent<T> implements OnInit, OnDestroy, AfterViewInit {  
@Input() set sites(sites: T[]){
this._sites = sites;
this.initializeFormControls();
};
get sites(): T[] {
return this._sites;
}
private _sites: T[];
private initializeFormControls() {
// set initial selection
this.siteCtrl.setValue(this.sites[1]);
// load the initial site list
this.filteredSites.next(this.sites.slice());
// listen for search field value changes
this.siteFilterCtrl.valueChanges
.pipe(takeUntil(this.onDestroy))
.subscribe(() => {
this.filterSites();
});}}
}
}

这样输入可以随时更改