当我从上一页返回时,我试图保留复选框的值。为此,我已将要检查的对象保存到服务中。 表单控件似乎以一种奇怪的方式工作,而不是使用布尔值,而是将选定的值存储在数组中。
我认为答案是从服务中检索我的值,然后在formcontrol上使用setValue()方法传递值。 但是,这似乎并未按预期更新模板上的复选框。
模板的相关部分
<mat-form-field style="padding-left: 10%">
<mat-label>Select a Database</mat-label>
<mat-select [formControl]="databases" multiple (ngModelChange)="selectDatabases();">
<mat-option *ngFor="let database of databaseList" [value]="database">{{database.name}}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="databaseList != null" style="padding-left: 10%">
<mat-label>Select a collection</mat-label>
<mat-select [formControl]="collections" multiple (ngModelChange)="selectCollections();">
<mat-option *ngFor="let collection of collectionList" [(value)]="collection">{{collection.name}} <i
style="color:#808080">{{collection.dbName}}</i></mat-option>
</mat-select>
</mat-form-field>
数据库和集合是我要操纵的FormControls
// angular form
public databases = new FormControl();
public collections = new FormControl();
从服务中检索值
if (this.isBack === 'true') {
this.selectedDatabases = this.pageLoadService.getSelectedDbs();
this.selectedCollections =
this.pageLoadService.getSelectedCollections();
this.setCheckBox();
}
}
尝试在我的ts文件中设置复选框值
setCheckBox() {
this.databases.setValue(this.selectedDatabases);
this.collections.setValue(this.selectedCollections);
console.log(this.selectedCollections);
console.log(this.collections);
}
我使用过console.logs(),可以看到当我返回页面时,它确实从服务中正确检索了值,并且正在更新formcontrol值以包括我的集合和数据库数组。但是,该模板似乎没有反映出这一点,选项似乎没有被选择。