第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

角度 - 如何根據(jù)數(shù)組中的值選中復(fù)選框？

角度 - 如何根據(jù)數(shù)組中的值選中復(fù)選框？

慕俠2389804 2022-08-04 16:57:26
我有一個包含這些復(fù)選框的表單，以允許用戶選擇一個項目的多個“口徑”：“表單”復(fù)選框這些復(fù)選框是通過ngFor從名為“calibres”的數(shù)組中創(chuàng)建的，該數(shù)組具有所有可能的值，如下面的代碼所示：組件.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（） 函數(shù)創(chuàng)建一個數(shù)組，其中包含在我的復(fù)選框中選中的元素  getCheckbox() {    this.item.calibres = [];    const checked = this.checkBox.filter(checkbox => checkbox.checked);    checked.forEach(data => {         this.item.calibres.push ( data.value );    });  }當我提交表單時，這個選中的elemets數(shù)組存儲在后端，用于表單創(chuàng)建的這個特定的“項目”，因此存儲的數(shù)組將類似于[ 50，60 ]。僅選中復(fù)選框。我試圖做的是在填寫表單的那一刻（用于項目“編輯”目的）是選中那些存儲在數(shù)組中的復(fù)選框。我怎樣才能做到這一點？
查看完整描述

3 回答

?
互換的青春

TA貢獻1797條經(jīng)驗 獲得超6個贊

如果您使用的是模型，那么這將非常容易和干凈。


假設(shè)您的機芯低于型號


  calibres = [

    {value: 1, isSelected: false},

    {value: 5, isSelected: false},

    {value: 4, isSelected: false}

  ];

當您從后端獲得數(shù)組時，只需檢查例如


backendArray = [2,4];

和一個函數(shù)檢查是獲取數(shù)據(jù)后選擇的標志


this.calibres = this.calibres.map(

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

    return elem});

HTML 部分使用選中的屬性。更改時傳遞口徑，并將切換邏輯設(shè)置為 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>


查看完整回答
反對 回復(fù) 2022-08-04
?
萬千封印

TA貢獻1891條經(jīng)驗 獲得超3個贊

不能在循環(huán)中使用屬性。因為您為數(shù)組中按 ischeck 屬性篩選的項目創(chuàng)建復(fù)選框。因此，使用此屬性將完成您的工作[checked]=true


 <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>


查看完整回答
反對 回復(fù) 2022-08-04
?
大話西游666

TA貢獻1817條經(jīng)驗 獲得超14個贊

希望這可以幫助將來的人，


我通過屬性綁定和一個小函數(shù)以簡單的方式解決了這個問題。


問題：我有一個數(shù)組，其值僅為選中的復(fù)選框，當用戶想要編輯它時，我必須再次顯示復(fù)選框，并且復(fù)選框已選中。Ex: Categories = ["a","d"]


溶液：


在 HTML 文件中 - 將屬性綁定與一個函數(shù)結(jié)合使用，該函數(shù)檢查數(shù)組中是否存在值并返回 true 或 false。（您也可以使用 *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 文件內(nèi)


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;

    }

   }


查看完整回答
反對 回復(fù) 2022-08-04
  • 3 回答
  • 0 關(guān)注
  • 180 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號