html - কৌণিক 2 চেকবক্স দুটি উপায় ডেটা বাঁধাই




angular typescript (7)

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

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

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

আমি 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 উদাহরণস্বরূপ saveUsername মান পরিবর্তন করি তবে চেকবক্সটি নতুন মানটি " saveUsername না"।

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

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


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

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

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

আপডেট: @ নিউম্যানের মতো এনজিএমডেল কোনও ফর্ম ব্যবহার করা হলে এটি কাজ করবে না Like তবে, আপনার [ngModelOptions] বৈশিষ্ট্যটি ব্যবহার করা উচিত (কৌণিক in তে পরীক্ষা করা):

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

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


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

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

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

মাইক কম্পোনেন্ট: <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">

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

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

<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
  ],
  [...]
})

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

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

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

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

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

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






data-binding