将列表分配给订阅方法内的下拉列表

Question

我正在尝试使用订阅方法从数据库中获取的一些数据填充NgMultiSelectDropDown。要分配给下拉列表的列表正在 subscribe 方法中填充。

a = [];
ddlList = [];
public jsonString: string = "";
public insrdList: Array < InsuredData > = [];
public insrdList1: InsuredData[];
constructor(
  http: HttpClient,
  @Inject('BASE_URL') baseUrl: string,
  private _cmsService: CMSService) {
  http.get < WeatherForecast[] > (baseUrl +
    'api/SampleData/WeatherForecasts').subscribe(result => {
    this.forecasts = result;
  }, error => console.error(error));
  this._cmsService.getAllInsuredNames().subscribe(res => {
    var i = 0;
    for (var k in res) {
      i++;
      this.ddlList.push(
        {
          "item_id": i,
          "item_text": (res)[k].insuredName
        }
      };
    }
    this.a = this.ddlList;
  }, error => console.error(error));
}

我的问题是，当我尝试将dropdown 绑定到ddlList 时，它不起作用。但是，当我将它绑定到a 时，它就可以工作了。

<ng-multiselect-dropdown [placeholder]="'custom placeholder'" [data]="a" [(ngModel)]="selectedItems" [settings]="dropdownSettings" (onSelect)="onItemSelect($event)" (onSelectAll)="onSelectAll($event)">
</ng-multiselect-dropdown>  

为什么会这样？

Answer 1

MultiSelectComponent 适用于ChangeDetectionStrategy.OnPush。它通过比较组件输入的引用来工作。在ddlList 的情况下，您没有更改对对象的引用（javascript 中的数组是对象），并且没有触发 OnPush 更改检测器。在a 的情况下，这部分更改了数组a 的引用：

this.a = this.ddlList;