formatter - json viewer




কৌণিক 2: একাধিক চেক করা চেকবাক্সগুলির মান পান (7)

আমার সমস্যাটি সত্যই সহজ: আমার কাছে চেকবাক্সগুলির একটি তালিকা রয়েছে:

<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] বিকল্প 1, অপশন 5, বিকল্প 8 [option1, option5, option8] যদি বিকল্প 1, 5 এবং 8 নির্বাচন করা হয়। এই অ্যারেটি জেএসএনের অংশ যা আমি এইচটিটিপি পুট অনুরোধের মাধ্যমে প্রেরণ করতে চাই।

আপনার সাহায্যের জন্য ধন্যবাদ!


  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> 

    ** এক্সওয়াইজেড.কম্পোনেন্ট.টিস **।

  2. একটি তালিকা তৈরি করুন - xyzlist।

  3. মান নির্ধারণ করুন, আমি এই তালিকায় জাভা থেকে মানগুলি পাস করছি।
  4. মানগুলি হ'ল ইন্ট-আইডি, বুলিয়ান-চেকড (কম্পোনেন্ট.টসে পাস করতে পারে)।
  5. কমপোনেট.সেটে এখন মান পেতে।

    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);
    
        }

আমি আশা করি এটি একই সমস্যা এমন কাউকে সহায়তা করবে।

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

ফ্লাইটটিডস অ্যারেতে এর মতো আরও অ্যারে থাকবে [[সত্য, 'আইডি_1'], [ভুয়া, 'আইডি_2'], [সত্য, 'আইডি_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);

}

আমি একটি সমাধান খুঁজে পেয়েছি গুনটারকে ধন্যবাদ! এটি যদি আমার কাউকে সহায়তা করতে পারে তবে আমার সম্পূর্ণ কোডটি এখানে:

<div class="form-group">
            <label for="options">Options :</label>
            <div *ngFor="#option of options; #i = index">
                <label>
                    <input type="checkbox"
                           name="options"
                           value="{{option}}"
                           [checked]="options.indexOf(option) >= 0"
                           (change)="updateCheckedOptions(option, $event)"/>
                    {{option}}
                </label>
            </div>
        </div>

আমি ব্যবহার করছি যে 3 টি অবজেক্ট:

options = ['OptionA', 'OptionB', 'OptionC'];
optionsMap = {
        OptionA: false,
        OptionB: false,
        OptionC: false,
};
optionsChecked = [];

এবং এখানে 3 টি দরকারী পদ্ধতি রয়েছে:

। বিকল্প optionsMap শুরু করতে:

initOptionsMap() {
    for (var x = 0; x<this.order.options.length; x++) {
        this.optionsMap[this.options[x]] = true;
    }
}

2. optionsMap আপডেট করতে optionsMap :

updateCheckedOptions(option, event) {
   this.optionsMap[option] = event.target.checked;
}

৩. optionsMap optionsChecked রূপান্তর করতে optionsMap করা এবং পোস্টের অনুরোধ প্রেরণের আগে options এটি সংরক্ষণ options :

updateOptions() {
    for(var x in this.optionsMap) {
        if(this.optionsMap[x]) {
            this.optionsChecked.push(x);
        }
    }
    this.options = this.optionsChecked;
    this.optionsChecked = [];
}

আমি কেবল এই সমস্যার মুখোমুখি হয়েছি, এবং কর্মক্ষেত্রটি পরিষ্কার রাখার জন্য, যতটা পারি কম কম ভেরিয়েবলের সাথে সবকিছুকে কাজ করার সিদ্ধান্ত নিয়েছি। এখানে আমার কোড উদাহরণ

<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);
  }
}

এর মতো একটি তালিকা তৈরি করুন: -

this.xyzlist = [
  {
    id: 1,
    value: 'option1'
  },
  {
    id: 2,
    value: 'option2'
  }
];

এইচটিএমএল: -

<div class="checkbox" *ngFor="let list of xyzlist">
            <label>
              <input formControlName="interestSectors" type="checkbox" value="{{list.id}}" (change)="onCheckboxChange(list,$event)">{{list.value}}</label>
          </div>

তারপরে এর উপাদানগুলির মধ্যে ts: -

onCheckboxChange(option, event) {
     if(event.target.checked) {
       this.checkedList.push(option.id);
     } else {
     for(var i=0 ; i < this.xyzlist.length; i++) {
       if(this.checkedList[i] == option.id) {
         this.checkedList.splice(i,1);
      }
    }
  }
  console.log(this.checkedList);
}

যেহেতু আমি একটি দীর্ঘ সময় একই ধরণের সমস্যা সমাধানে ব্যয় করেছি, তাই আমি আমার অভিজ্ঞতা ভাগ করে দেওয়ার জন্য উত্তর দিচ্ছি। আমার সমস্যাটি একই ছিল, জানার জন্য, নির্দিষ্ট ইভেন্টটি ট্রিগার হওয়ার পরে অনেকগুলি চেকবাক্সের মান পাওয়া। আমি অনেকগুলি সমাধানের চেষ্টা করেছি তবে আমার কাছে যৌনতম ভিউচিল্ড্রেন ব্যবহার করছে

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

রেফের জন্য সম্ভাব্য অন্যান্য সমাধান, এখানে অনেকগুলি অনুরূপ বিষয় রয়েছে, তাদের কোনওটিরই এই সমাধানটির উদ্দেশ্য নেই ...:


<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