कोणीय 2 चेकबॉक्स दो तरह से डेटा बाइंडिंग

Question

मैं Angular2 के लिए काफी नया हूं और मुझे थोड़ी समस्या है:

मेरे लॉगिन-कंपोनेंट-एचटीएमएल में, मेरे पास दो चेकबॉक्स हैं, जिन्हें मैं दो तरह से डेटा-बाइंडिंग में लॉगिन-कंपोनेंट-टाइपस्क्रिप्ट में बाँधना चाहता हूँ।

यह HTML है:

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

और यह Component.ts है:

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।

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

Comments

चेकबॉक्स बाइंडिंग freakyjolly.com/

— कोड स्पाई

Answer 1

आप निकाल सकते हैं .selectedसे saveUsernameअपने चेकबॉक्स इनपुट में के बाद से saveUsername एक बूलियन है। [(ngModel)]उपयोग के बजाय[checked]="saveUsername" (change)="saveUsername = !saveUsername"

संपादित करें: सही समाधान:

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

अद्यतन: @newman की तरह जब ngModelयह काम नहीं करेगा एक रूप में देखा जाता है। हालाँकि, आपको [ngModelOptions]विशेषता का उपयोग करना चाहिए (परीक्षण 7 में परीक्षण):

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

मैंने स्टैकब्लिट्ज़ पर एक उदाहरण भी बनाया: https://stackblitz.com/edit/angular-abelrm

Comments

यदि मैं ऐसा करता हूं, तो मुझे एक त्रुटि मिलती है: त्रुटि: एक संदर्भ या चर को असाइन नहीं कर सकता है!

— जूनिया

हम्म, मैं पहले से ही इस त्रुटि हो रही है: अखंडित वादा अस्वीकृति: एक संदर्भ या चर को असाइन नहीं कर सकता! ; क्षेत्र: <जड़>; कार्य: वादा; मूल्य: त्रुटि: एक संदर्भ या चर को निर्दिष्ट नहीं कर सकता! और चेकबॉक्स कैसे जानता है, अगर इसे चालू / बंद किया जाना चाहिए? कोणीय 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>

— Junias

कुछ कारणों से, यदि इनपुट एक फॉर्म के अंदर नहीं है, लेकिन यह * एनजीफोर लूप का हिस्सा है, [(ngModel)]="saveUsername"काम नहीं करता है, लेकिन यह एक काम करता है। यह कोणीय में एक बग होना चाहिए?

— न्यूमैन

यह मेरे लिए काम करता है जबकि [(ngModel)] अजीब व्यवहार कर रहा है। क्या कोई मुझे कुछ दस्तावेज या चर्चा पर चर्चा कर सकता है कि चेकबॉक्स के मामले में ngModel की तुलना में उपयोग करना बेहतर क्यों है?

— vc669

जब ngModelएक रूप में उपयोग किया जाता है तो यह काम नहीं करेगा। [ngModelOptions]="{standalone: true}"मैं क्या जरूरत है।

— रेनोवेशन_3

Answer 2

दुर्भाग्य से @ ठकानी द्वारा दिया गया समाधान दोतरफा बाध्यकारी नहीं है । यह सिर्फ UI / FrontEnd भाग से वन-वे चेंजिंग मॉडल को हैंडल करता है।

सरल के बजाय:

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

चेकबॉक्स के लिए दो-तरफ़ा बाइंडिंग करेगा।

बाद में, जब मॉडल चेकबॉक्स फ़्लैग बैकएंड या यूआई भाग से बदला जाता है - वॉइला, चेकबॉक्स फ़्लैग वास्तविक चेकबॉक्स स्थिति को संग्रहीत करता है।

यह सुनिश्चित करने के लिए कि मैंने परिणाम प्रस्तुत करने के लिए प्लंकर कोड तैयार किया है: https://plnkr.co/edit/OdEAPWRoqaj0T6Yp0Mfk

बस इस सवाल का जवाब आप को शामिल करना चाहिए पूरा करने के लिए import { FormsModule } from '@angular/forms'में app.module.tsऔर आयात सरणी यानी करने के लिए जोड़

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

[...]

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

Comments

जब आप चेकबॉक्स का उपयोग कर रहे हैं, तब काम नहीं कर रहा है ngFor, वस्तुओं की एक सरणी को दोहराते हुए[{"checked":true},{"checked":false}]

— jackOfAll

मुझे यह समाधान काम करने के लिए नहीं मिल रहा है, मुझे मिल गया हैcUncaught Error: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'input'

— sebnukem

@sebnukem ऐसा लगता है कि आपने फॉर्मस्मॉडल के लिए घोषित आयात को गायब कर दिया है।

— टेडी

@ इनपुट के अंदर @sebnukem [(ngModel)] के लिए एक संपत्ति का उपयोग करना आवश्यक है

— एंजेला पैन

क्या यह कई चेकबॉक्स के लिए भी काम करेगा? <input type="checkbox" [(ngModel)]="day.IsChecked" [checked]="day.IsChecked" />

— बार्न्स

Answer 3

मैं Angular5 के साथ काम कर रहा हूं और मुझे काम करने के लिए बाइंडिंग प्राप्त करने के लिए "नाम" विशेषता को जोड़ना पड़ा ... बाइंडिंग के लिए "आईडी" की आवश्यकता नहीं है।

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

Comments

इस जवाब ने मेरे लिए काम किया। अन्य उत्तर भी सही हैं। लेकिन [(ngModel)] हमें बूलियन को स्विच करने के लिए एक अलग फ़ंक्शन लिखने की ज़रूरत नहीं है

— जसमीत

Answer 4

मैं कुछ और स्पष्ट पसंद करता हूं:

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

Comments

इस पूरे धागे में केवल एक चीज है जो काम करती है। धन्यवाद! कोणीय का उपयोग करना 8.2.11।

— डाका

यह उत्तर शीर्ष पर होना चाहिए।

— कठोर राघव

मेरा दिन बचा लिया :-)

— नवयुवकों को फांसी

Answer 5

<abc [(bar)]="foo"/>कोणीय पर वाक्य रचना का उपयोग करते समय ।

यह करने के लिए अनुवाद: <abc [bar]="foo" (barChange)="foo = $event" />

जिसका मतलब है कि आपके घटक में यह होना चाहिए:

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

Comments

उत्तर वास्तव में अच्छी तरह से है - लघु और स्पष्ट, लेकिन एक और प्रश्न के तहत

— निकिता

Answer 6

आप बस दो तरह से डेटा बाइंडिंग के लिए कुछ इस तरह का उपयोग कर सकते हैं:

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

Answer 7

चेकबॉक्स काम पाने के लिए आपको इन सभी चरणों का पालन करना चाहिए:

1. FormsModule अपने मॉड्यूल में आयात करें
2. इनपुट को formटैग के अंदर रखें

3. आपका इनपुट इस तरह होना चाहिए:

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

   नोट: अपने इनपुट में नाम डालना न भूलें।

Answer 8

आपको तत्व में name="selected"विशेषता जोड़ना होगा input।

उदाहरण के लिए:

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

Answer 9

मैंने एक कस्टम घटक को दो तरह से बाँधने की कोशिश की है

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">

Answer 10

किसी भी स्थिति में, यदि आपको एक चेकबॉक्स के साथ एक मूल्य बांधना है जो बूलियन नहीं है तो आप नीचे दिए गए विकल्पों की कोशिश कर सकते हैं

Html फ़ाइल में:

<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?embed=1&file=src/app/app.component.html

Answer 11

मुझे पता है कि यह दोहराया जा सकता है, लेकिन किसी एक के लिए चेकबॉक्स की सूची लोड करने के लिए मैं इस उदाहरण में कोणीय रूप में चेकबॉक्स के साथ लोड करना चाहता हूं: सभी का चयन करें / कोणीय 2 का उपयोग करके सभी चेकबॉक्स का चयन रद्द करें

यह ठीक काम करता है लेकिन बस जोड़ने की जरूरत है

[ngModelOptions]="{standalone: true}" 

अंतिम HTML इस तरह होनी चाहिए:

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

उम्मीद है कि इस मदद thnx

Answer 12

यदि आप लूप के लिए चेकबॉक्स का उपयोग करना चाहते हैं, तो इसे प्राप्त करने के लिए वर्कअराउंड चेकबॉक्स की स्थिति को किसी सरणी के अंदर स्टोर करना और इसे इंडेक्स के आधार पर बदलना है। *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;
    }
  }

Answer 13

मेरा कोणीय निर्देश जैसे कोणीयज (एनजी-ट्रू-वैल्यू एनजी-झूठ-मूल्य)

@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">

Comments

हाय, कृपया अपनी समस्या बताएं, आपने क्या प्रयास किया है और अपने प्रश्न में कुछ संदर्भ

— जोड़िए

Answer 14

कोणीय पी-चेकबॉक्स में,

पी-चेकबॉक्स की सभी विशेषताओं का उपयोग करें

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

और इससे भी महत्वपूर्ण बात [ngModelOptions]="{standalone: true}यह है कि इसमें शामिल होने के लिए मत भूलना साथ ही यह मेरा दिन है।

Answer 15

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;