কৌণিক 2 চেকবাক্স দ্বি ওয়ে ডেটা বাঁধাই


202

আমি Angular2 এ মোটামুটি নতুন এবং আমার কিছুটা সমস্যা আছে:

আমার লগইন-কম্পোনেন্ট-এইচটিএমএলে, আমার কাছে দুটি চেকবক্স রয়েছে, যা আমি লগইন-উপাদান-টাইপস্ক্রিপ্টে দ্বি-উপাত্তে ডেটা-বাইন্ডিং বাঁধতে চাই।

এটি এইচটিএমএল:

<div class="checkbox">
<label>
    <input #saveUsername [(ngModel)]="saveUsername.selected" type="checkbox" data-toggle="toggle">Save username
</label>
</div>

এবং এটি হল কম্পোনেন্ট.টিস:

import { Component, OnInit }    from '@angular/core';
import { Router }               from '@angular/router';
import { Variables }            from '../../services/variables';

@Component({
    selector: 'login',
    moduleId: module.id,
    templateUrl: 'login.component.html',
    styleUrls: ['login.component.css']
})


export class LoginComponent implements OnInit {

    private saveUsername: boolean = true;
    private autoLogin: boolean = true;
    constructor(private router: Router, private variables: Variables) { }

    ngOnInit() { 
        this.loginValid = false;
        // Get user name from local storage if you want to save

        if (window.localStorage.getItem("username") === null) {
           this.saveUsername = true;
           this.autoLogin = true;
           console.log(this.saveUsername, this.autoLogin);
        } else {
           console.log("init", window.localStorage.getItem("username"));
        }
    }

    login(username: string, password: string, saveUsername: boolean, autoLogin: boolean) {
        this.variables.setUsername(username);
        this.variables.setPassword(password);
        this.variables.setIsLoggedIn(true);
        console.log(saveUsername, autoLogin);
        //this.router.navigate(['dashboard']);
    }

আমি যদি একটি চেকবক্স ক্লিক করি তবে আমি নিয়ামক (উপাদান) এর সঠিক মান পাই।

তবে আমি যদি saveUsernameউপাদানটির উদাহরণস্বরূপ মানটি পরিবর্তন করি তবে চেকবক্সটি নতুন মানটি "পেল না"।

সুতরাং আমি কম্পোনেন্টটি থেকে চেকবক্সটি পরিচালনা করতে পারি না (যেমন আমি ngOnInitউপাদানটিতে করতে চাই।

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


উত্তর:


350

আপনি অপসারণ করতে পারেন .selectedথেকে saveUsernameআপনার চেকবক্সটি ইনপুটে যেহেতু saveUsername একটি বুলিয়ান। পরিবর্তে [(ngModel)]ব্যবহার[checked]="saveUsername" (change)="saveUsername = !saveUsername"

সম্পাদনা: সঠিক সমাধান:

<input
  type="checkbox"
  [checked]="saveUsername"
  (change)="saveUsername = !saveUsername"/>

আপডেট: @ নিউম্যানের মতো লক্ষ্য করা গেছে যে কখন ngModelকোনও ফর্ম ব্যবহার করা হবে এটি কার্যকর হবে না। যাইহোক, আপনার [ngModelOptions]মতো অ্যাট্রিবিউট ব্যবহার করা উচিত (কৌণিক in তে পরীক্ষিত):

<input
  type="checkbox"
  [(ngModel)]="saveUsername"
  [ngModelOptions]="{standalone: true}"/> `

স্ট্যাকব্লিটজে আমি একটি উদাহরণও তৈরি করেছি: https://stackblitz.com/edit/angular-abelrm


আমি যদি এটি করি, তবে আমি একটি ত্রুটি পেয়েছি: ত্রুটি: কোনও রেফারেন্স বা ভেরিয়েবলকে বরাদ্দ করতে পারে না!
জুনিয়াস

এইচএম, আই এম এম ইতিমধ্যে এই ত্রুটিটি পেয়েছে: আনহ্যান্ডলড প্রতিশ্রুতি প্রত্যাখ্যান: কোনও রেফারেন্স বা ভেরিয়েবলকে বরাদ্দ করতে পারে না! ; অঞ্চল: <মূল> কার্য: প্রতিশ্রুতি.পরে; মান: ত্রুটি: কোনও রেফারেন্স বা ভেরিয়েবলকে বরাদ্দ করতে পারে না! এবং চেকবক্সটি কীভাবে জানে, যদি এটি চালু করা / বন্ধ করা উচিত? কৌনিক 1 এ আমি এটি এটি করতে পারি: $scope.loginData = {}; $scope.loginData.username = window.localStorage.getItem("username");এবং এটি টেমপ্লেটে:<ion-toggle ng-model="saveUsername" ng-change="toggleSaveUsername()" toggle-class="toggle-energized">Benutzername speichern</ion-toggle>
জুনিয়াস

1
কিছু কারণে, যদি ইনপুটটি কোনও ফর্মের মধ্যে না থাকে তবে এটি * এনজিফোর্ড লুপের অংশ, [(ngModel)]="saveUsername"কাজ করে না, তবে এটি কাজ করে। এটি কৌণিক মধ্যে একটি বাগ হতে হবে?
নিউম্যান

1
[(এনজি মডেল)] আজব আচরণ করার সময় এটি আমার পক্ষে কাজ করে। চেকবাক্সগুলির ক্ষেত্রে এনজিএমডেলের চেয়ে কেন [চেক করা] ব্যবহার করা ভাল বলে কেউ আমাকে কোনও ডকুমেন্টেশন বা আলোচনার দিকে নির্দেশ করতে পারেন?
vc669

3
যখন ngModelএকটি ফর্ম ব্যবহার করা হয় এটি কাজ করবে না। [ngModelOptions]="{standalone: true}"আমার যা দরকার ছিল
বৃষ্টিপাত 14

88

দুর্ভাগ্যক্রমে @ হাকানী প্রদত্ত সমাধানটি নয় দ্বি-মুখী বন্ধন নয় । এটি কেবল ইউআই / ফ্রন্টইন্ড অংশ থেকে ওয়ান-ওয়ে পরিবর্তনশীল মডেলটি পরিচালনা করে।

পরিবর্তে সহজ:

<input [(ngModel)]="checkboxFlag" type="checkbox"/>

চেকবক্সের জন্য দ্বিমুখী বাইন্ডিং করবে।

পরবর্তীতে মডেল যখন checkboxFlag ব্যাক-এন্ড বা UI 'তে অংশ থেকে পরিবর্তিত হয় -, voila, checkboxFlag দোকানে প্রকৃত চেকবক্সটি রাষ্ট্র।

ফলাফলটি উপস্থাপনের জন্য আমি প্লঙ্কার কোড প্রস্তুত করেছি তা নিশ্চিত হতে: https://plnkr.co/edit/OdEAPWRoqaj0T6Yp0Mfk

শুধু এই উত্তরটি আপনাকে অন্তর্ভুক্ত করা উচিত সম্পন্ন করার import { FormsModule } from '@angular/forms'মধ্যে app.module.tsএবং আমদানির অ্যারের অর্থাত যোগ

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

[...]

@NgModule({
  imports: [
    [...]
    FormsModule
  ],
  [...]
})

3
আপনি যখন কোনও ভিতরে থাকা চেকবক্সটি ব্যবহার করছেন তখন কাজ করছেন বলে মনে হচ্ছে নাngFor[{"checked":true},{"checked":false}]
জ্যাকআফএল সমস্ত

আমি কাজের এই সমাধানটি পেতে পারি না, আমি পেয়েছিcUncaught Error: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input'
sebnukem

5
@ sebnukem দেখে মনে হচ্ছে আপনি ফর্মস মডুলেলের জন্য আমদানির ঘোষণা মিস করেছেন।
টেডি

@ সেব্নুকেম <ইনপুট> এর ভিতরে একটি নামের সম্পত্তি প্রয়োজন [[এনজি মডেল]] ব্যবহার করার জন্য
অ্যাঞ্জেলা প্যান

এটি একাধিক চেকবক্সের জন্যও কাজ করবে? <input type="checkbox" [(ngModel)]="day.IsChecked" [checked]="day.IsChecked" />
বার্নস

35

আমি অ্যাঙ্গুলার 5 এর সাথে কাজ করছি এবং বাঁধাইয়ের কাজটি পেতে আমাকে "নাম" বৈশিষ্ট্য যুক্ত করতে হয়েছিল ... বাঁধার জন্য "আইডি" প্রয়োজন হয় না।

<input type="checkbox" id="rememberMe" name="rememberMe" [(ngModel)]="rememberMe">

1
এই উত্তরটি আমার পক্ষে কাজ করেছিল। অন্যান্য উত্তরগুলিও সঠিক। তবে [(এনজিএমডেল)] দিয়ে আমাদের বুলিয়ান পরিবর্তন করতে আলাদা ফাংশন লিখতে হবে না
জস্মিত

25

আমি আরও স্পষ্ট কিছু পছন্দ:

component.html

<input #saveUserNameCheckBox
    id="saveUserNameCheckBox" 
    type="checkbox" 
    [checked]="saveUsername" 
    (change)="onSaveUsernameChanged(saveUserNameCheckBox.checked)" />

component.ts

public saveUsername:boolean;

public onSaveUsernameChanged(value:boolean){
    this.saveUsername = value;
}

2
এই পুরো থ্রেডে কেবলমাত্র কাজ হয়েছিল। ধন্যবাদ! কৌণিক ব্যবহার 8.2.11
ডাকা

এই উত্তরটি শীর্ষে থাকা উচিত।
কঠোর রাঘব

1
আমার দিনটি সংরক্ষণ করেছে :-)
হ্যান্স নিউউকর্ম্যানস

6

<abc [(bar)]="foo"/>কৌণিকের উপর সিনট্যাক্স ব্যবহার করার সময় ।

এটি অনুবাদ করে: <abc [bar]="foo" (barChange)="foo = $event" />

যার অর্থ আপনার উপাদান থাকা উচিত:

@Input() bar;
@Output() barChange = new EventEmitter();

উত্তরটি খুব ভাল - সংক্ষিপ্ত এবং পরিষ্কার, তবে অন্য প্রশ্নের অধীনে হওয়া উচিত
নিকিতা

5

দ্বিমুখী ডেটা বাঁধাই করতে আপনি এই জাতীয় কিছু ব্যবহার করতে পারেন:

<input type="checkbox" [checked]="model.property" (change)="model.property = !model.consent_obtained_ind">

3

চেকবক্সের কাজ পেতে আপনার এই সমস্ত পদক্ষেপগুলি অনুসরণ করা উচিত:

  1. FormsModule আপনার মডিউলটি আমদানি করুন
  2. একটি formট্যাগের মধ্যে ইনপুট রাখুন
  3. আপনার ইনপুটটি এমন হওয়া উচিত:

    <input name="mpf" type="checkbox" [(ngModel)]="value" />

    দ্রষ্টব্য: আপনার ইনপুটটিতে নাম রাখতে ভুলবেন না।


3

আপনাকে অবশ্যই উপাদানটিতে name="selected"অ্যাট্রিবিউট যুক্ত করতে হবে input

উদাহরণ স্বরূপ:

<div class="checkbox">
  <label>
    <input name="selected" [(ngModel)]="saveUsername.selected" type="checkbox">Save username
  </label>
</div>

2

আমি একটি কাস্টম উপাদান দুটি উপায় বাইন্ডিং চেষ্টা করেছি

Mycomponent: <input type="checkbox" [(ngModel)]="model" >

_model:  boolean;   

@Output() checked: EventEmitter<boolean> = new EventEmitter<boolean>();

@Input('checked')
set model(checked: boolean) {

  this._model = checked;
  this.checked.emit(this._model);
  console.log('@Input(setmodel'+checked);
}

get model() {
  return this._model;
}

আশ্চর্যজনক জিনিস এই কাজ

<mycheckbox  [checked]="isChecked" (checked)="isChecked = $event">

এই অভ্যাস যখন

<mycheckbox  [(checked)]="isChecked">

1

যে কোনও পরিস্থিতিতে আপনার যদি বুলিয়ান নয় এমন একটি চেকবক্সের সাথে মান আবদ্ধ করতে হয় তবে নীচের বিকল্পগুলি ব্যবহার করে দেখতে পারেন

এইচটিএমএল ফাইলটিতে:

<div class="checkbox">
<label for="favorite-animal">Without boolean Value</label>
<input type="checkbox" value="" [checked]="ischeckedWithOutBoolean == 'Y'" 
(change)="ischeckedWithOutBoolean = $event.target.checked ? 'Y': 'N'">
</div>

উপাদান মধ্যেischeckedWithOutBoolean: any = 'Y';

স্ট্যাকব্লিটজ https://stackblitz.com/edit/angular-5szclb?e એમ્બેડ=1&file=src/app/app.componal.html এ দেখুন


1

আমি জানি এটির পুনরাবৃত্তি হতে পারে তবে যে কেউ সিলেক্ট চেকবাক্স সহ চেকবক্সগুলির তালিকাটি কৌণিক আকারে লোড করতে চায় আমি এই উদাহরণটি অনুসরণ করি: সমস্ত নির্বাচন করুন / কৌনিক 2+ ব্যবহার করে সমস্ত চেকবাক্সটি অনির্বাচিত করুন

এটি সূক্ষ্ম কাজ করে তবে কেবল যুক্ত করা দরকার

[ngModelOptions]="{standalone: true}" 

চূড়ান্ত এইচটিএমএলটি এর মতো হওয়া উচিত:

<ul>
    <li><input type="checkbox" [(ngModel)]="selectedAll" (change)="selectAll();"/></li>
    <li *ngFor="let n of names">
    <input type="checkbox" [(ngModel)]="n.selected" (change)="checkIfAllSelected();">{{n.name}}
    </li>
  </ul>

টাইপরাইটারে মুদ্রি

  selectAll() {
    for (var i = 0; i < this.names.length; i++) {
      this.names[i].selected = this.selectedAll;
    }
  }
  checkIfAllSelected() {
    this.selectedAll = this.names.every(function(item:any) {
        return item.selected == true;
      })
  }

এই সাহায্য আশা করি


0

লুপের সাথে চেকবক্স ব্যবহার করতে চাইলে বিশেষত একই অর্জনের জন্য একটি কার্যপ্রণালী হ'ল একটি অ্যারের ভিতরে চেকবক্সের স্টেট সংরক্ষণ করা এবং সূচকের ভিত্তিতে এটি পরিবর্তন করা *ngFor লুপের । এইভাবে আপনি আপনার উপাদানগুলির মধ্যে চেকবক্সের অবস্থা পরিবর্তন করতে পারেন।

app.component.html

<div *ngFor="let item of items; index as i"> <input type="checkbox" [checked]="category[i]" (change)="checkChange(i)"> {{item.name}} </div>

app.component.ts

items = [
    {'name':'salad'},
    {'name':'juice'},
    {'name':'dessert'},
    {'name':'combo'}
  ];

  category= []

  checkChange(i){
    if (this.category[i]){  
      this.category[i] = !this.category[i];
    }
    else{
      this.category[i] = true;
    }
  }

0

আমার কৌণিক দিকনির্দেশক যেমন কৌণিকরূপ (এনজি-ট্রু-মান এনজি-ফলস-মান)

@Directive({
    selector: 'input[type=checkbox][checkModel]'
})
export class checkboxDirective {
    @Input() checkModel:any;
    @Input() trueValue:any;
    @Input() falseValue:any;
    @Output() checkModelChange = new EventEmitter<any>();

    constructor(private el: ElementRef) { }

    ngOnInit() {
       this.el.nativeElement.checked = this.checkModel==this.trueValue;
    }

    @HostListener('change', ['$event']) onChange(event:any) {
        this.checkModel = event.target.checked ? this.trueValue : this.falseValue;
        this.checkModelChange.emit(this.checkModel);
    }

}

এইচটিএমএল

<input type="checkbox" [(checkModel)]="check" [trueValue]="1" [falseValue]="0">

হাই, দয়া করে আপনার সমস্যাটি ব্যাখ্যা করুন, আপনি কী চেষ্টা করেছেন এবং আপনার প্রশ্নে কিছু প্রসঙ্গ যুক্ত করেছেন
538 রোজ

0

কৌণিক পি-চেকবক্সে,

পি-চেকবক্সের সমস্ত বৈশিষ্ট্য ব্যবহার করুন

<p-checkbox name="checkbox" value="isAC" 
    label="All Colors" [(ngModel)]="selectedAllColors" 
    [ngModelOptions]="{standalone: true}" id="al" 
    binary="true">
</p-checkbox>

এবং আরও গুরুত্বপূর্ণ, [ngModelOptions]="{standalone: true}এটি আমার দিন বাঁচিয়ে রাখার পাশাপাশি অন্তর্ভুক্ত করতে ভুলবেন না ।


0
Angular: "9.0.0"
Angular CLI: 9.0.1
Node: 13.10.1
OS: linux x64

.html ফাইল

<input [(ngModel)]="userConsent" id="userConsent" required type="checkbox"/> " I Accept"

.ts ফাইল

userConsent: boolean = false;
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.