ダイナミックチェックボックスリストにngModelをバインドする：角2/Typescript

Question

チェックボックスが動的に生成されるモデルをバインドして更新する正しい方法がわかりません。 （これは、Angoman 2ジェネレータを使用して最初に作成されたASP.NET Coreプロジェクトです）または、私がちょうど見つけたその問題の簡単なチェックボックス。

以下は、機能とタイムスロットを持つコードを削除したものです。各施設は複数のタイムスロットを持つことができます。タイムスロットのチェックボックスのリストが表示されます。最初のデータは、1つのタイムスロットのみがチェックされるべきであることを示す。しかし、私が施設をロードすると、すべてのタイムスロットがチェックされます。彼らは私が期待したようにngModelと束縛されていません。

1. 施設データに含まれるタイムスロットだけがすべてではなくチェックされるように修正するにはどうすればよいですか？
2. ngModel timeslotidsプロパティにチェックされているものをバインドするにはどうすればよいですか？コンポーネントに配列プロパティを作成し、ngModelに頼る代わりにそのプロパティを操作する必要がありますか？ （これを試しましたが、明らかにそうしていないので、以下のコードに戻っています）
3. これはチェックする必要がないのでチェックしていないので、簡単なチェックボックス（haselectric）にバインドする際に問題があるようです。私はこのすべてを修正する輸入がないのですか？

コードの説明 私はインターフェイスにバインドするAPIから2つのオブジェクト（ファシリティとタイムスロット）を取得しています。彼らは大幅に簡略化のためにプロパティに減少している：

：これは、更新前に、単一の施設のためのJSONデータである

[{"id":1,"timeslotname":"Daily"},{"id":2,"timeslotname":"Hourly"},{"id":4,"timeslotname":"Market"}] 

：これはタイムスロットのためのJSONデータである

export interface IFacility { 
    id: number, 
    name: string, 
    haselectric: boolean, 
    timeslotids: number[],  
    timeslots: ITimeslot[] 

} 
export interface ITimeslot { 
    id: number, 
    timeslotname: string  
} 

{"id":2,"name":"Clements Building","haselectric":true,"timeslotids":[1],"timeslots":[{"id":1,"timeslotname":"Daily"}]} 

施設を編集するためのコンポーネント（facility.component.html）：

<form #form="ngForm" (ngSubmit)="submitForm()" *ngIf="formactive"> 
    <input type="hidden" [(ngModel)]="updatedfacility.id" #id="ngModel" name="id" /> 
    <div class="form-group"> 
     <label for="name">Facility Name *</label> 
     <input type="text" class="form-control input-lg" [(ngModel)]="updatedfacility.name" #name="ngModel" name="name" placeholder="Facility Name *"> 
    </div> 
    <div class="form-group"> 
        <label for="exhibitspaces">Has Electric *</label> 
        <input type="checkbox" class="form-control input-lg" [(ngModel)]="updatedfacility.haselecric" #haselectric="ngModel" name="haselectric"> 
    </div> 
    <div class="form-group"> 
     <label for="timeslots">Select Timeslots Available for Rent *</label> 
     <div *ngIf="dbtimeslots" > 
      <span *ngFor="let timeslot of dbtimeslots" class="checkbox"> 
       <label for="timeslot"> 
        <input type="checkbox" [(ngModel)]="updatedfacility.timeslotids" value="{{timeslot.id}}" name="{{timeslot.id}}" [checked]="updatedfacility.timeslotids.indexOf(timeslot.id)" />{{timeslot.timeslotname}} 
       </label> 
      </span> 
     </div> 
    </div> 
    <button type="submit" class="btn btn-lg btn-default" [disabled]="form.invalid">Update</button> 
</form> 

コンポーネントのコード（facility.component.ts）

import { Component, OnInit, Input, Output, OnChanges, EventEmitter } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import { ActivatedRoute, Router } from '@angular/router'; 
import { FormsModule } from '@angular/forms'; 
import { FacilityService } from '../../../services/facility.service'; 
import { TimeslotService } from '../../../services/timeslot.service'; 
import { IFacility } from '../../../services/facility.interface'; 
import { ITimeslot } from '../../../services/timeslot.interface'; 

@Component({ 
    template: require('./facility.component.html') 
}) 
export class FacilityDetailsComponent { 
    facility: IFacility; 
    httpresponse: string; 
    successMessage: string; 
    errormessage: string; 
    showSuccess: boolean = true; 
    showError: boolean = true; 
    formactive: boolean = true; 
    dbtimeslots: ITimeslot[];  


    constructor(
    private _route: ActivatedRoute, 
    private _router: Router, 
    private _facilityservice: FacilityService, 
    private _timeslotservice: TimeslotService 
) {} 

    ngOnInit(): void { 
    this._timeslotservice.getTimeslots().subscribe(timeslots => this.dbtimeslots = timeslots, error => this.errormessage = <any>error); 
    let id = +this._route.snapshot.params['id']; 

    this._facilityservice.getFacility(id) 
     .subscribe(facility => this.facility = facility, 
     error => this.errormessage = <any>error); 

    } 

    submitForm() { 
    //update the facility through the service call 
    this._facilityservice.updateFacility(this.facility) 
     .subscribe(response => { 
      this.httpresponse = response; 
      console.log(this.httpresponse); 
      this.successMessage = "Facility updated!"; 
      this.formactive = false; 
      setTimeout(() => this.formactive = true, 3); 
      this.showSuccess = false; 
     }, 
     error => { 
      this.errormessage = <any>error; 
      this.showError = false; 
     }); 
    }  

}

P.S.私がtimeslotsのfacilityオブジェクトに2つのプロパティを持つのは、idのリストが更新のためにAPIに渡す方がはるかに簡単だからです。完全なモデルを渡すのではなく（タイムスロットは私がここにあるよりも大きく、データベースを更新する必要はありません）。それが達成される必要のあるものとは無関係なコメントを予約してください。

この質問が見つかりました...ngmodel binding with dynamic array of checkbox in angular2 これは試してもうまくいきませんでした：Get values from a dynamic checkbox list また、ローカルプロパティをチェックボックスの（変更した）バージョンで更新しようとしましたが、どちらも機能していないようです：Angular 2: Get Values of Multiple Checked Checkboxes

Answer 1

上記のНЛОの回答に基づいて私は私の質問に対する解決策を見つけ出すことができました。ありがとう、НЛО。その後

<div class="form-group"> 
    <label for="timeslots">Select Timeslots Available for Rent *</label> 
    <div *ngIf="dbtimeslots"> 
     <span *ngFor="let timeslot of dbtimeslots" class="checkbox"> 
      <label> 
       <input type="checkbox" value="{{timeslot.id}}" name="{{timeslot.id}}" [checked]="(facility.timeslotids && (-1 !== facility.timeslotids.indexOf(timeslot.id)) ? 'checked' : '')" (change) ="updateSelectedTimeslots($event)" />{{timeslot.timeslotname}} 
      </label> 
     </span> 
    </div> 
</div> 

コンポーネントの機能：

updateSelectedTimeslots(event) { 
    if (event.target.checked) { 
      if (this.facility.timeslotids.indexOf(parseInt(event.target.name)) < 0) { 
       this.facility.timeslotids.push(parseInt(event.target.name)); 

      } 
    } else { 
      if (this.facility.timeslotids.indexOf(parseInt(event.target.name)) > -1) 
      { 
       this.facility.timeslotids.splice(this.facility.timeslotids.indexOf(parseInt(event.target.name)), 1);    
      } 
    } 
    //console.log("TimeslotIDs: ", this.facility.timeslotids);  
} 

Answer 2

私はあなたのコードに似ています（ngForすべての可能なチェックボックスのうちのいくつかはチェックする必要があります、変更はいくつかのデータ構造に保存されます）

<md-checkbox 
    *ngFor="let some of availableSomes" 
    name="{{ some }}" 
    checked="{{ data.somes && -1 !== this.data.somes.indexOf(some) ? 'checked' : '' }}" 
    (change)="updateSome($event)"> 
    {{ some }} 
</md-checkbox> 

ここupdateSomeです：

updateSome(event) { 
    if (-1 !== this.availableSkills.indexOf(event.source.name)) { 
    if (event.checked) { 
     this.data.somes.push(event.source.name); 
    } else { 
     this.data.somes.splice(this.data.somes.indexOf(event.source.name), 1); 
    } 
    } 
} 

また、event.targetである必要がありますが、材料によってはevent.sourceと思われます。不器用な解決策の種類ですが、あなたが望むものをどのように達成できるかを理解するのに役立つと思います。