如何在 Angular mat-slide-toggle 和 mat-checkbox 上更改 VISUAL 状态

Question

我有一个 Angular 表单，它有一个从数据库记录创建的对象选择框。我想在选择一个对象值时用对象值填充表单。

我的 Angular 应用程序有一个对象数组，这些对象映射到表单控制文本框和 mat-slide-toggles。我的表单填充了数组中的正确值，当我单击提交时显示正确的值。我遇到的问题是，当从下拉列表中选择条目时，滑动切换和复选框不会视觉上根据数组中的布尔 (1/0) 值自行更新。 p>

即使提交的表单值正确，DISPLAY 值也是错误的，不能正确表示后端数据。您如何视觉上更新幻灯片切换和复选框，以便它们响应数组对象的真/假值？

由于表单已经呈现，我是否需要使用 getElementById 来更新这些控件？

setValue 直观地初始化文本框，但我无法让幻灯片切换以正确地直观地显示它们的状态。正如我之前所说，当我提交表单时，所有内容都正确显示了它们的值。

角度 HTML

   <form [formGroup]="collectionUpdateForm" (ngSubmit)="updateCollectionData(collectionUpdateForm.value)">
      <!--Again as in ts file. For small forms this is fine, but you can make these dynamically with ngFor or something-->
      <mat-form-field class="full-width" appearance="outline">
         <mat-label>Select Language</mat-label>
         <mat-select formControlName="languageID" [(ngModel)]="languageSelected">
            <mat-option *ngFor="let language of languages" [value]="language.languageID">
               {{language.languageName}}
            </mat-option>
         </mat-select>
      </mat-form-field>
      <mat-form-field class="full-width" appearance="outline">
         <mat-label>Select Category</mat-label>
         <mat-select formControlName="categoryID" [(ngModel)]="categorySelected" (click)="getCollections()">
            <mat-option *ngFor="let category of categories" [value]="category.categoryID">
               {{category.categoryName}}
            </mat-option>
         </mat-select>
      </mat-form-field>
      <mat-form-field class="full-width" appearance="outline">
         <mat-label>Collection Name</mat-label>
         <input matInput formControlName="collectionName">
      </mat-form-field>
      <mat-form-field class="full-width" appearance="outline">
         <mat-label>Event Name</mat-label>
         <input matInput formControlName="eventName">
      </mat-form-field>
      <mat-form-field class="full-width" appearance="outline">
         <mat-label>Collection Description</mat-label>
         <textarea matInput formControlName="collectionDesc" cdkTextareaAutosize></textarea>
      </mat-form-field>
      <mat-form-field class="full-width" appearance="outline">
         <mat-label>Product ID</mat-label>
         <input matInput formControlName="productID">
      </mat-form-field>
      <mat-slide-toggle formControlName="onlineOnly" [(ngModel)]="onlineOnlyChecked" (input)="onlineOnlyChecked">Online Only</mat-slide-toggle>
      <mat-slide-toggle formControlName="display" [(ngModel)]="displayChecked" (input)="displayChecked">Display</mat-slide-toggle>
      <button mat-raised-button color="primary">Update</button>
   </form>

Angular 打字稿

   collectionUpdateForm = new FormGroup
   (
      {
         languageID: new FormControl(),
         categoryID: new FormControl(),
         collectionID: new FormControl(),
         collectionName: new FormControl(),
         eventName: new FormControl(),
         collectionDesc: new FormControl(),
         productID: new FormControl(),
         onlineOnly: new FormControl(),
         display: new FormControl(),
      }
   )

   getCollectionSelected()
   {
      //alert( "Language = " + this.selectedCollection?.languageID )
      //alert( "Channel = " + this.channelSelected )
      //alert( "Category = " + this.categorySelected )
      this.collectionUpdateForm.setValue( this.selectedCollection as any )
      //alert( "Online Only = " + this.selectedCollection?.onlineOnly )
      //this.onlineOnlyChecked = false;
      //this.displayChecked = false;

      //this.channelID = this.selectedCollection?.channelID;
      //this.languageID = this.selectedCollection?.languageID;
      //this.collectionID = this.selectedCollection?.collectionID;
   }

角度服务

export interface MediaCollectionInfoInterface
{
   collectionID: number;
   collectionName: string;
   eventName: string;
   categoryID: number;
   productID: string;
   languageID: string;
   onlineOnly: number;
   collectionDesc: string;
   display: number;
}

Answer 1

经过反复试验，我找到了以下解决方案：

[checked]="onlineOnlyChecked">仅限在线 [checked]="displayChecked">Display

onlineOnlyChecked 和 displayChecked 都是布尔变量，它们的值是从数组对象中分配的。