无法向angular下拉列表中添加默认项

Question

我试图显示一些默认选择的数据到我的角下拉菜单，但由于某种原因，如果我push()项目从subscribe()方法内的项目不被选中，如果我尝试添加这个特定订阅方法外的项目，它将项目添加到下拉菜单中，没有任何问题。

注意:如果我记录我的数组，它会给我所有的项，包括我从subscribe()

里面添加的项组件的一部分:

public students = []
public loadedSelectedStudents = []
public selectedStudents = []
// Get all selected students
this.studentService.getStaffStudents(+loadedUserId).subscribe(async selectedStudents => {
for (var i = 0; i < selectedStudents.length; i++) {
var selectedStudentId: number = selectedStudents[i].studentId
var studentModel: StaffStudentModel = new StaffStudentModel()
studentModel.userId = +loadedUserId
studentModel.studentId = selectedStudentId

var resStudent: StudentModel = await this.studentService.getStudent(selectedStudentId).toPromise()

// THIS IS NOT WORKING
this.loadedSelectedStudents.push({ student_id: studentModel.studentId, student_name: resStudent.name })
this.selectedStudents.push({ student_id: studentModel.studentId, student_name: resStudent.name})
this.changeDetectorRef.detectChanges();
}
})
// THIS IS WORKING
this.selectedStudents.push({student_id: 5, student_name: "Jonh"})

我的部分服务:

getStaffStudents(userId: number) : any {
return this.http.get<StudentModel[]>(this.baseUrl + 'Api/GetStaffStudents/' + userId).pipe(map(res => res))
}

我的下拉菜单设置和FormGroup:

this.studentsDropDownSettings = {
idField: 'student_id',
textField: 'student_name',
allowSearchFilter: true,
noDataAvailablePlaceholderText: "No Available Students"
}
this.studentsDropDownForm = this.fb.group({
studentsItems: [this.selectedStudents]
});

和我的HTML元素:

<div *ngIf="showStudensMenu" class="form-group">
<form [formGroup]="studentsDropDownForm">
<label for="exampleFormControlSelect1">Students *</label>
<ng-multiselect-dropdown
[settings]="studentsDropDownSettings" 
[data]="students"
(onSelect)="onStudentSelected($event)"
(onSelectAll)="onAllStudentsSelected()"
(onDeSelect)="onStudentDeSelected($event)"
(onDeSelectAll)="onAllStudentsDeSelected()"
formControlName="studentsItems">
</ng-multiselect-dropdown>
</form>
</div>

Answer 1

但是多选正在消耗[data]="students"，你不应该把新项目推到students[]吗?如果选择的值确实是从this.selectedStudents中读取的，您可以通过使用扩展...(例如this.selectedStudents = [...this.selectedStudents])重置项来触发更改检测。

Answer 2

这是因为组件的html部分加载而不是数据尚未来自API，即订阅尚未完成。

您需要设置一个标志，在成功订阅时将isLoaded设置为true，并更新表单。在html中，使用ngIf语句，这样下拉菜单就不会在没有数据的情况下加载。

<div *ngIf="isLoaded && showStudensMenu" class="form-group">
<form [formGroup]="studentsDropDownForm">
<!-- your code -->
</form>
</div>

订阅:

this.studentService.getStaffStudents(+loadedUserId).subscribe(async selectedStudents => {
//your code
this.isLoaded=true;
//Update the Form
this.studentsDropDownForm = this.fb.group({
studentsItems: [this.selectedStudents]
});
}
})

不要忘记将isLoaded初始化为false;