Question

借助Angular ngx-mat-select-search Custom Component和ngx-mat-select-search文档上的文章，我实现了具有实时搜索功能的mat-select-search组件。在提供动态数据之前，它一直运行良好。

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

@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组件并且未定义错误站点，无法使用功能，因为尚未在

中加载站点

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的更多信息，请查看其 documentation。

否则，不初始化sites数组也是一个问题。如果您是根据请求设置数据的，则必须先初始化数组：

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();
     });}}
  }

}

这样输入可以随时更改

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

2 个答案: