Angular 2 확인란 양방향 데이터 바인딩

Angular 2 확인란 양방향 데이터 바인딩

Angular2는 처음이라 문제가 좀 있습니다.

Login-Component-HTML에는 2개의 체크박스가 있으며 Login-Component-TypeScript에 대한 데이터 바인딩을 양방향으로 수행합니다.

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컴포넌트 내에 있습니다.

도와주셔서 감사합니다!

제거할 수 있습니다..selected부터saveUsernamesaveUsername은 부울형이기 때문에 체크박스의 입력이 필요합니다.대신[(ngModel)]사용하다[checked]="saveUsername" (change)="saveUsername = !saveUsername"

편집: 올바른 솔루션:

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

업데이트: @newman이 언제 알아차렸는지 확인ngModel사용할 수 없는 형태로 사용됩니다.단, 다음 명령어를 사용해야 합니다.[ngModelOptions]다음과 같은 속성(Angular 7에서 테스트):

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

Stackblitz에서 예를 작성했습니다.https://stackblitz.com/edit/angular-abelrm

안타깝게도 @hakani에서 제공하는 솔루션은 양방향 바인딩이 아닙니다.UI/FrontEnd 부분에서 단방향 변경 모델만 처리합니다.

그 대신에, 심플한 것은 다음과 같습니다.

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

는 체크박스에 대해 양방향 바인딩을 수행합니다.

이후 Model checksFlag가 Backend 또는 UI part - voila에서 변경되면 checksflag는 실제 체크박스 상태를 저장합니다.

결과를 표시하기 위해 Plunker 코드가 준비되어 있는지 확인합니다.https://plnkr.co/edit/OdEAPWRoqaj0T6Yp0Mfk

이 답변을 완료하기 위해서는import { FormsModule } from '@angular/forms'안으로app.module.tsImport에 어레이를 추가합니다.

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

[...]

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

나는 좀 더 명확한 것을 선호한다.

component.displaces(컴포넌트).

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

컴포넌트.ts 를 참조해 주세요.

public saveUsername:boolean;

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

저는 Angular5에서 일하고 있는데 바인딩을 작동시키기 위해 "이름" 속성을 추가해야 했습니다.바인딩에는 "id"가 필요하지 않습니다.

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

다음과 같은 방법으로 데이터를 양방향 바인딩할 수 있습니다.

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

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

.disc 파일

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

.ts 파일

userConsent: boolean = false;

체크박스를 켜려면 다음 단계를 모두 수행해야 합니다.

1. 수입품FormsModule모듈 내
2. 입력 내용을 a에 넣습니다.form태그

3. 입력은 다음과 같습니다.

   <input name="mpf" type="checkbox" [(ngModel)]="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">

붙여야 요.name="selected" input★★★★★★ 。

예를 들어 다음과 같습니다.

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

반복 답변이 될 수 있다는 것을 알지만 selectall 체크박스가 있는 체크박스의 목록을 angular 형식으로 로드하려면 다음 예를 따릅니다.각도 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;
      })
  }

이것이 도움이 되기를 바란다.

어떤 상황에서든 부울이 아닌 체크박스로 값을 바인드해야 하는 경우 다음 옵션을 사용해 보십시오.

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

stackblitz https://stackblitz.com/edit/angular-5szclb?embed=1&file=src/app/app.component.html 를 참조해 주세요.

angularjs와 같은 각도 지시(ng-true-value ng-false-value)

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

}

html

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

각도 p-체크박스에서

p-checkbox의 모든 속성 사용

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

더 한 것은, 잊지 꼭 .[ngModelOptions]="{standalone: true}덕분에 목숨을 건졌다.

하는 경우 것을 회피책은 하고 "루프"의입니다.*ngFor componentloop 할 수 . 이렇게 하면 컴포넌트의 체크박스 상태를 변경할 수 있습니다.

app.component.module

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

언급URL : https://stackoverflow.com/questions/40214655/angular-2-checkbox-two-way-data-binding