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

Question

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

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;

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

Assigning list to dropdown inside subscribe method

typescript

angular

angular6