Angular ngx select下拉列表:下拉选项不更新

Question

我是angular的新手，所以这可能是一个非常简单的问题。我正在使用ngx选择下拉列表(一个下拉控件(。页面上有两个下拉控件，当第一个下拉控件更改时，第二个下拉控件应更新下拉选项。

新的下拉选项是通过rest api正确下载的。我的问题是用户界面没有更新。当我在ngOnInit中添加下拉选项时，它就起作用了。但当我稍后添加它们时，它不起作用。

这将起作用：

ngOnInit() {
this.apiService.getAllActivities().subscribe(response => {
this.activities = response;
this.activityDropDownOptions = response;
});
}

这不是：

activityDropDownSelectionChanged(event: any) {
this.questionnaireDropDownOptions = []
for (let activity of event.value) {
this.apiService.getActivity(activity.id).subscribe(response => {
for (let organisationalUnitQuestionnaire of response.organisationalUnitQuestionnaires) {
this.questionnaireDropDownOptions.push(organisationalUnitQuestionnaire);
}
});
}
}

HTML页面：

<form #searchForm="ngForm" id="searchForm" name="searchForm" (ngSubmit)="search()">
<b>Aktion/ Projekt:</b>
<div class="form-group">
<label for="activityDropDown" class="mt-2">Aktion / Projekt:</label>
<ngx-select-dropdown name="activityDropDown" id="activityDropDown" [multiple]="true" [(value)]="activityDropDownModel" [config]="activityDropDownConfig" [options]="activityDropDownOptions"
(change)="activityDropDownSelectionChanged($event)"></ngx-select-dropdown>
<label class="mt-2" for="visitPeriodInput">Besuchszeitraum Von / Bis:</label>
<input name="visitPeriodInput" id="visitPeriodInput" type="text" autocomplete="off" placeholder="Keine Einschränkung ausgewählt" class="form-control"
bsDaterangepicker [bsConfig]="{ dateInputFormat: 'MM/DD/YYYY' }" [(ngModel)]="searchFormModel.visitPeriod">
</div>
<b>Fragebogen / Fragen</b>
<div class="form-group">
<label for="questionnaireDropDown" class="mt-2">Fragebogen:</label>
<ngx-select-dropdown name="questionnaireDropDown" id="questionnaireDropDown" [multiple]="true" [(value)]="questionnaireDropDownModel" [config]="questionnaireDropDownConfig" [options]="questionnaireDropDownOptions"></ngx-select-dropdown>
<label for="questionTextInput" class="mt-2">Fragetext beinhalt:</label>
<input type="text" placeholder="Keine Einschränkung angegeben" class="form-control" name="questionTextInput" id="questionTextInput" [(ngModel)]="searchFormModel.questionText" autocomplete="off">
</div>

</form>

Answer 1

您应该像下面这样写

this.questionnaireDropDownOptions = [...this.questionnaireDropDownOptions, organisationalUnitQuestionnaire];

而不是这个

this.questionnaireDropDownOptions.push(organisationalUnitQuestionnaire);