गतिशील चेकबॉक्स सूची के लिए ngModel बाइंडिंग: कोणीय 2/टाइपप्रति

Question

मैं बाँध और एक मॉडल जहां चेक बॉक्स गतिशील रूप से उत्पन्न कर रहे हैं अद्यतन करने के लिए उचित तरीके से यकीन नहीं है। (यह के साथ एक ASP.NET कोर परियोजना है कोणीय 2 शुरू में Yeoman जनरेटर का उपयोग कर बनाया) या उस बात मैं सिर्फ बाहर पाया है के लिए एक सरल चेकबॉक्स।

नीचे नीचे कोड है, जो एक सुविधा और समयावधियों है छीन लिया है। प्रत्येक सुविधा में कई टाइमलॉट हो सकते हैं। टाइम्सलॉट चेकबॉक्स सूची ठीक प्रदर्शित करती है। प्रारंभिक डेटा इंगित करता है कि केवल एक बार की जांच की जानी चाहिए। लेकिन जब मैं एक सुविधा लोड करता हूं, तो सभी टाइमलॉट चेक किए जाते हैं। जैसा कि मैंने उम्मीद की थी, वे ngModel के साथ बाध्यकारी नहीं हैं।

1. मैं इसे कैसे ठीक कर सकता हूं ताकि सुविधा डेटा में शामिल समय-समय पर सभी की जांच की जा सके?
2. मैं कैसे बाँध क्या ngModel timeslotids संपत्ति के लिए जाँच की है? मैं घटक पर एक सरणी संपत्ति बना सकते हैं और बजाय हेरफेर कि ngModel पर भरोसा करने की जरूरत है? (इसने कोशिश की लेकिन स्पष्ट रूप से यह सही नहीं किया गया था, इसलिए नीचे दिए गए कोड पर वापस लौटाया गया)
3. मुझे लगता है कि यह एक साधारण चेकबॉक्स (हैइलेक्ट्रिक) के लिए बाध्यकारी समस्या भी प्रतीत होता है क्योंकि यह भी होने पर जांच नहीं कर रहा है। क्या मुझे एक आयात याद आ रहा है जो यह सब ठीक करेगा ??

कोड व्याख्या मैं दो वस्तुओं (सुविधा और टाइम स्लॉट) एक API जो मैं इंटरफेस करने के लिए बाध्य से आ रही है। वे काफी सादगी की खातिर गुण में कम हो गई है:

:

[{"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  
} 

इस समयावधि के लिए JSON डेटा है

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

सुविधा (सुविधा.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; 
     }); 
    }  

}

पी.एस. टाइम्सलॉट्स के लिए सुविधा ऑब्जेक्ट में मेरे पास दो गुण हैं क्योंकि आईडी की एक सूची अद्यतन करने के लिए एपीआई को पार करना बहुत आसान है। पूर्ण मॉडल को पार करने के बजाय (टाइम्सलॉट्स जो मेरे पास है उससे बड़ा है और डेटाबेस को अपडेट करने की आवश्यकता नहीं है)। उस पर टिप्पणी आरक्षित करें क्योंकि यह जो कुछ भी किए जाने की आवश्यकता से संबंधित न हो।

मुझे यह प्रश्न मिला ...लेकिन अफसोस की बात है कि किसी ने भी इस गरीब साथी का जवाब नहीं दिया: 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 है। अनाड़ी समाधान का प्रकार है, लेकिन मुझे लगता है कि आप यह पता लगाने आप कैसे प्राप्त कर सकते हैं कि आप क्या