Angular - 如何根據數組中的值檢查復選框？

Question

我有一個帶有這些復選框的表單，以允許用戶 select 一個項目的多個“口徑”：

表單復選框

這些復選框是通過 ngFor 從一個名為“calibres”的數組中創建的，該數組具有所有可能的值，如下面的代碼所示：

組件.html

<div >
      <mat-checkbox #checkBox
      *ngFor="let calibre of calibres; let i = index"
      [value]="calibre"
      (change)="getCheckbox()"
      class="example-margin mb-0 mt-1" >{{calibre}}</mat-checkbox>
</div>

component.ts上的 getCheckbox () function 創建在我的復選框中選中的那些元素的數組

  getCheckbox() {

    this.item.calibres = [];
    const checked = this.checkBox.filter(checkbox => checkbox.checked);
    checked.forEach(data => {
         this.item.calibres.push ( data.value );
    });
  }

當我提交表單時，這個檢查過的元素數組存儲在后端，用於表單創建的這個特定“項目”，所以存儲的數組將類似於 [50,60]。 僅選中復選框。

我試圖做的是在填寫表單時（出於“編輯”項目的目的）檢查存儲在數組中的那些復選框。

我怎樣才能做到這一點？

Answer 1

希望這對將來的人有所幫助，

我通過屬性綁定和一個小的 function 以一種簡單的方式解決了這個問題。

問題：我有一個數組Ex: Categories = ["a","d"] ，它的值只有選中的復選框，當用戶想要編輯它時，我必須再次顯示復選框，並且復選框已經選中。

解決方案：

在 HTML 文件中 - 使用與 function 的屬性綁定來檢查該值是否存在於數組中並返回真或假。 （您也可以使用 *ngFor）

  <h3>Category</h3>
  <label><input type="checkbox" [checked]="checkCat('a')">a</label>
  <label><input type="checkbox" [checked]="checkCat('b')">b</label>
  <label><input type="checkbox" [checked]="checkCat('c')">c</label>
  <label><input type="checkbox" [checked]="checkCat('d')">d</label>

在.ts文件里面

cat = ["a","d"]; // checkbox data received from backend

 checkCat(data){
    let ref = this.cat.find(x => x == data); // this checks the cat[] array
    if(ref == data){
      return true;
    } else {
      return false;
    }
   }

Answer 2

如果您使用的是 model，那么這將非常簡單和干凈。

假設您的口徑低於 model

  calibres = [
    {value: 1, isSelected: false},
    {value: 5, isSelected: false},
    {value: 4, isSelected: false}
  ];

當您從后端獲取數組時，只需檢查

backendArray = [2,4];

還有一個 function 在您獲取數據后檢查 isSelected 標志

this.calibres = this.calibres.map(
      (elem) =>{ elem.isSelected = this.backendArray.indexOf(elem.value) != -1 ? true : false;
    return elem});

HTML 部分使用選中的屬性。 在更改時傳遞口徑並將切換邏輯執行到 isSelected 標志

<div >
      <mat-checkbox #checkBox
      *ngFor="let calibre of calibres"
      [checked]="calibre.isSelected"
      [value]="calibre.value"
      (change)="getCheckbox(calibre)"
      class="example-margin mb-0 mt-1" >{{calibre.value}}</mat-checkbox>
</div>

Answer 3

你不能在循環中使用屬性[checked]=true 。 因為您為數組中的項目創建了復選框，這些項目由 ischecked 屬性過濾。 因此，使用此屬性將完成您的工作

 <mat-checkbox #checkBox
      *ngFor="let calibre of calibres; let i = index"
      [value]="calibre"
      [checked]="true"
      (change)="getCheckbox()"
      class="example-margin mb-0 mt-1" >{{calibre}}</mat-checkbox>

更新：

 getCheckbox() {
     this.item.calibres = this.checkBox.map(checkbox  => {
            return {
               value: checkbox.value,
               isChecked: checkbox.checked
            };
        }); 
  }

<mat-checkbox #checkBox
      *ngFor="let calibre of calibres; let i = index"
      [value]="calibre.value"
      [checked]="calibre.isChecked"
      (change)="getCheckbox()"
      class="example-margin mb-0 mt-1" >{{calibre.value}}</mat-checkbox>