如何从组件中的打字稿文件中设置“垫选”复选框的值?

时间:2019-10-09 11:08:31

标签: angular angular-material

当我从上一页返回时,我试图保留复选框的值。为此,我已将要检查的对象保存到服务中。 表单控件似乎以一种奇怪的方式工作,而不是使用布尔值,而是将选定的值存储在数组中。

我认为答案是从服务中检索我的值,然后在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值以包括我的集合和数据库数组。但是,该模板似乎没有反映出这一点,选项似乎没有被选择。

0 个答案:

没有答案