Angular mat-select-search可重用下拉组件，如何控制传递的对象数组和控制函数执行？

Question

我借助 Angular ngx-mat-select-search Custom Component 上的文章实现了具有实时搜索功能的 mat-select-search 组件和 ngx-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);
}));

在延迟时间内，SiteDropdownComponent 组件正在呈现并给出错误 sites are undefined cannot use functions because sites have not been loaded yet in

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>

To learn more about NgIf take a look at its documentation.

---

否则不初始化站点数组也可能是个问题。 如果您根据请求设置数据，则必须先初始化数组:

sites: any[] = [];