La liaison ngModel Dynamiques Liste de Case à cocher : Angulaire 2 / Tapuscrit

Je ne suis pas sûr de la bonne façon de lier et de mettre à jour un modèle où les cases sont générés dynamiquement. (C'est un ASP.NET projet de Base Angulaire 2 initialement créé à l'aide du générateur Yeoman) Ou une simple case à cocher pour que la matière, je viens de trouver.

Ci-dessous est dépouillé de code, qui dispose d'une installation et des intervalles de temps. Chaque établissement peut avoir plusieurs intervalles de temps. Le créneau horaire liste de case à cocher s'affiche bien. Les données initiales indique seulement un intervalle de temps doit être vérifié. Mais quand je charge une installation, tous les intervalles de temps sont vérifiées. Ils ne sont pas en liaison avec ngModel comme je m'y attendais.

1. Comment puis-je résoudre ce problème de sorte que seules les intervalles de temps inclus dans les données de l'installation sont contrôlés plutôt que de tout?
2. Comment puis-je lier ce qui est vérifié pour la ngModel timeslotids propriété? Dois-je créer un tableau de propriété sur le composant et de le manipuler au lieu de compter sur ngModel? (essayé cela, mais évidemment ce n'est pas l'droit donc repris le code ci-dessous)
3. J'ai aussi semblent avoir un problème de liaison à une simple case à cocher (haselectric) parce que ce n'est pas non en cochant la case où elle devrait être. Me manque qu'une importation de corriger tout cela??

EXPLICATION DU CODE
J'ai deux objets (installation et l'horaire de diffusion) à venir à partir d'une api qui je lier à des interfaces. Ils ont été significativement réduite dans les propriétés pour des raisons de simplicité:

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

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

C'est les données JSON pour les intervalles de temps:

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

C'est les données JSON pour une seule Installation avant d'être mis à jour:

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

De composants pour le montage d'une installation (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>

Code pour le composant (établissement.composante.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. La raison pour laquelle j'ai un deux propriétés dans la facilité de l'objet, pour des intervalles de temps est parce que une liste d'id est beaucoup plus facile de passer à travers de l'API pour la mise à jour. Plutôt que de passer plein de modèles (les intervalles de temps est plus grand que ce que j'ai ici et n'est pas nécessaire de mettre à jour la base de données). Merci de réserver des commentaires sur ce qu'il n'a aucun rapport avec ce qui doit être accompli.

J'ai trouvé cette question...mais malheureusement, personne n'a répondu à ce pauvre garçon: ngmodel de liaison avec le tableau dynamique de case à cocher dans angular2
Essayé mais n'a pas fonctionné: Obtenir les valeurs à partir d'une dynamique de la liste de case à cocher
J'ai aussi essayé la version de mise à jour d'un local bien sur (modifier) de la case, mais ça n'a pas l'air de fonctionner: Angulaire 2: Obtenir les Valeurs de Plusieurs Coché des Cases à cocher

OriginalL'auteur EHeine | 2017-04-24