6

change()すでにチェックされているアイテムを取得できないため、使用またはclick()関数を使用せずに、コンポーネント内のフォームのチェックされたすべてのアイテムを取得したいと考えています。

TS の配列は次のとおりです。

  PartyRoles = [
    {
     Id: 1,
     Name: "Vendor",
     Checked: true
    },
    {
      Id: 2,
      Name: "Client",
      Checked: true
    },
    {
      Id: 3,
      Name: "Consigner",
      Checked: false
    }       
  ]

私のHTMLフォーム：

<form (ngSubmit)="editPartyRolesSubmit()">
    <div *ngFor="let item of PartyRoles">
        <label>
        <input type="checkbox" value="{{item.Id}}" [attr.checked]="item.Checked==true ? true : null" [attr.disabled]="item.Id==1 ? true : null" />
        <span innerHTML="{{item.Name}}"></span>
       </label>
    </div>
</form>

チェックされたすべての値を取得したい onSubmit 関数:

  editPartyRolesSubmit= function () {
    // Please suggest how to fetch checked items
  }
4

5 に答える 5

1

Html を次のように変更します。

<form (ngSubmit)="editPartyRolesSubmit()">
    <div *ngFor="let item of PartyRoles">
        <label>
        <input type="checkbox" value="{{item.Id}}" 
               [checked]="item.Checked" 
               (change)="item.Checked = !item.Checked" 
               [attr.disabled]="item.Id==1 ? true : null" />
        <span innerHTML="{{item.Name}}"></span>
       </label>
    </div>
</form>

最新PartyRolesのチェックボックスの値で更新されたままになります。例として、次のようにアクセスできます。

  editPartyRolesSubmit(){

    // Access each item like this in PartyRoles
    this.PartyRoles.forEach(role=>{
      console.log('Id: ' + role.Id + ', Name: ' + role.Name + ', Checked: ' + role.Checked);
    });

    // Or like this 
    let role = this.PartyRoles.find(x=>x.Id === 1);
    if(role !== undefined){
      console.log(role);
    }

    // Or a filetered list 
    let checkedRoles = this.PartyRoles.filter(x=>x.Checked === true);
    console.log(checkedRoles);

    // Or by array index
    let roleTwo = this.PartyRoles[2];
    console.log(roleTwo);

  }

functionメソッドでキーワードを使用する必要はありません。ここに作業デモへのリンクがあります。

于 2017-08-31T07:41:04.750 に答える
-1

選択した項目に対して個別の配列を作成できます

let SelectedList=[]
for(let i=0;i<PartyRoles.length;i++){
 if(PartyRoles[i].checked){
  SelectedList.push(PartyRoles[i]);
 }
}
于 2017-08-31T07:32:20.993 に答える