json - कोणीय 2: एकाधिक चेक किए गए चेकबॉक्स का मान प्राप्त करें




forms checkbox (7)

  1. मैंने उन लोगों के लिए बस थोड़ा सा सरलीकृत किया है जो मूल्य वस्तु की सूची का उपयोग कर रहे हैं। XYZ.Comonent.html

    <div class="form-group">
            <label for="options">Options :</label>
            <div *ngFor="let option of xyzlist">
                <label>
                    <input type="checkbox"
                           name="options"
                           value="{{option.Id}}"
    
                           (change)="onClicked(option, $event)"/>
                    {{option.Id}}-- {{option.checked}}
                </label>
            </div>
            <button type="submit">Submit</button>
        </div> 

    ** XYZ.Component.ts **।

  2. एक सूची बनाएँ - xyzlist।

  3. मान निर्दिष्ट करें, मैं इस सूची में जावा से मान गुजर रहा हूं।
  4. मान इंट-ईडी हैं, बूलियन-चेक किया गया (कंपोनेंट में पास कर सकते हैं)।
  5. अब Componenet.ts में मान प्राप्त करने के लिए।

    xyzlist;//Just created a list
    onClicked(option, event) {
        console.log("event  " + this.xyzlist.length);
        console.log("event  checked" + event.target.checked);
        console.log("event  checked" + event.target.value);
        for (var i = 0; i < this.xyzlist.length; i++) {
            console.log("test --- " + this.xyzlist[i].Id;
            if (this.xyzlist[i].Id == event.target.value) {
                this.xyzlist[i].checked = event.target.checked;
            }
            console.log("after update of checkbox" + this.xyzlist[i].checked);
    
        }

मेरी समस्या वास्तव में सरल है: मेरे पास इस तरह के चेकबॉक्स की एक सूची है:

<div class="form-group">
    <label for="options">Options :</label>
    <label *ngFor="#option of options" class="form-control">
        <input type="checkbox" name="options" value="option" /> {{option}}
    </label>
</div>

और मैं चयनित विकल्पों की एक सरणी भेजना [option1, option5, option8] जैसे कुछ: [option1, option5, option8] विकल्प 1, विकल्प 5, विकल्प 8 [option1, option5, option8] यदि विकल्प 1, 5 और 8 का चयन किया जाता है। यह सरणी एक JSON का हिस्सा है जिसे मैं HTTP PUT अनुरोध के माध्यम से भेजना चाहता हूं।

आपकी सहायताके लिए धन्यवाद!


एक छोटे से बदलाव के साथ मेरे ऊपर काम करता है @ccwasden समाधान, प्रत्येक चेकबॉक्स में एक अद्वितीय नाम होना चाहिए अन्यथा बाध्यकारी काम नहीं करेगा

<div class="form-group">
    <label for="options">Options:</label>
    <div *ngFor="let option of options; let i = index">
        <label>
            <input type="checkbox"
                   name="options_{{i}}"
                   value="{{option.value}}"
                   [(ngModel)]="option.checked"/>
            {{option.name}}
        </label>
    </div>
</div>

// my.component.ts

@Component({ moduleId:module.id, templateUrl:'my.component.html'})

export class MyComponent {
  options = [
    {name:'OptionA', value:'1', checked:true},
    {name:'OptionB', value:'2', checked:false},
    {name:'OptionC', value:'3', checked:true}
  ]

  get selectedOptions() { // right now: ['1','3']
    return this.options
              .filter(opt => opt.checked)
              .map(opt => opt.value)
  }
}

और आपके मुख्य मॉड्यूल में FormsModule को आयात करने के लिए sur भी बनाते हैं

import { FormsModule } from '@angular/forms';


imports: [
    FormsModule
  ],

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

import { ViewChildren, QueryList } from '@angular/core';

/** Get handle on cmp tags in the template */
@ViewChildren('cmp') components: QueryList<any>;

ngAfterViewInit(){
    // print array of CustomComponent objects
    console.log(this.components.toArray());
}

यहां पाया गया: https://.com/a/40165639/4775727

रेफरी के लिए संभावित अन्य समाधान, बहुत सारे समान विषय हैं, उनमें से कोई भी इस समाधान का उद्देश्य नहीं है ...:


मुझे उम्मीद है कि यह किसी ऐसे व्यक्ति की मदद करेगा, जिसकी समस्या समान है।

templet.html

<form [formGroup] = "myForm" (ngSubmit) = "confirmFlights(myForm.value)">
  <ng-template ngFor [ngForOf]="flightList" let-flight let-i="index" >
     <input type="checkbox" [value]="flight.id" formControlName="flightid"
         (change)="flightids[i]=[$event.target.checked,$event.target.getAttribute('value')]" >
  </ng-template>
</form>

component.ts

फ्लाइटिड्स एरे में इस तरह का एक और एरे होगा [[true, 'id_1'], [false, 'id_2'], [true, 'id_3'] ...] यहां सही मायने में यूजर ने इसे चेक किया, गलत मतलब यूजर ने चेक किया फिर अनचेक किया। । उपयोगकर्ता द्वारा चेक किए गए आइटम को सरणी में नहीं डाला जाएगा।

flightids = []; 
confirmFlights(value){  
    //console.log(this.flightids);

    let confirmList = [];
    this.flightids.forEach(id => {
      if(id[0]) // here, true means that user checked the item 
        confirmList.push(this.flightList.find(x => x.id === id[1]));
    });
    //console.log(confirmList);

}

मुझे बस इस मुद्दे का सामना करना पड़ा, और मैंने कार्यक्षेत्र को साफ रखने के लिए सब कुछ कम चर के साथ काम करने का निर्णय लिया। यहाँ मेरे कोड का उदाहरण है

<input type="checkbox" (change)="changeModel($event, modelArr, option.value)" [checked]="modelArr.includes(option.value)" />

विधि, जिसे परिवर्तन कहा जाता है, मॉडल में मूल्य को बढ़ा रहा है, या इसे हटा रहा है।

public changeModel(ev, list, val) {
  if (ev.target.checked) {
    list.push(val);
  } else {
    let i = list.indexOf(val);
    list.splice(i, 1);
  }
}

मैंने उसी समस्या का सामना किया है और अब मेरे पास एक उत्तर है जो मुझे अधिक पसंद है (आप भी हो सकते हैं)। मैंने प्रत्येक चेकबॉक्स को एक सरणी सूचकांक में बांधा है।

पहले मैंने एक वस्तु को इस तरह परिभाषित किया:

SelectionStatusOfMutants: any = {};

फिर चेकबॉक्स इस तरह हैं:

<input *ngFor="let Mutant of Mutants" type="checkbox"
[(ngModel)]="SelectionStatusOfMutants[Mutant.Id]" [value]="Mutant.Id" />

जैसा कि आप जानते हैं कि जेएस में वस्तुएं मनमाने ढंग से सूचकांकों के साथ हैं। इसलिए परिणाम इतना आसान है:

इस तरह चयनित लोगों की गणना करें:

let count = 0;
    Object.keys(SelectionStatusOfMutants).forEach((item, index) => {
        if (SelectionStatusOfMutants[item])
            count++;
    });

और इस तरह से इस तरह के लोगों को चुना:

let selecteds = Object.keys(SelectionStatusOfMutants).filter((item, index) => {
        return SelectionStatusOfMutants[item];
    });

आप समझ सकते हैं?! बहुत सरल बहुत सुंदर। TG।


<input type="checkbox" name="options" value="option" (change)="updateChecked(option, $event)" /> 

export class MyComponent {
  checked: boolean[] = [];
  updateChecked(option, event) {
    this.checked[option]=event; // or `event.target.value` not sure what this event looks like
  }
}





angular2-forms