Hộp kiểm góc 2 Liên kết dữ liệu hai chiều

Tôi rất mới với Angular2 và tôi có một vấn đề nhỏ:

Trong Đăng nhập-Thành phần-HTML, tôi có hai hộp kiểm, tôi muốn liên kết theo hai cách liên kết dữ liệu với Đăng nhập-Thành phần-TypeScript.

Đây là HTML:

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

Và đây là Thành phần:

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

Nếu tôi nhấp vào một hộp kiểm, tôi nhận được giá trị chính xác trong bộ điều khiển (thành phần).

Nhưng nếu tôi thay đổi giá trị của ví dụ saveUsernametrong thành phần, hộp kiểm sẽ không "lấy" giá trị mới.

Vì vậy, tôi có thể thao túng hộp kiểm từ Thành phần (như tôi muốn làm trong ngOnInitthành phần.

Cảm ơn bạn đã giúp đỡ!

Bạn có thể xóa .selectedtừ saveUsernametrong hộp kiểm nhập của mình vì saveUsername là một boolean. Thay vì [(ngModel)]sử dụng[checked]="saveUsername" (change)="saveUsername = !saveUsername"

Chỉnh sửa: Giải pháp đúng:

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

Cập nhật: Giống như @newman nhận thấy khi ngModelđược sử dụng ở dạng không hoạt động. Tuy nhiên, bạn nên sử dụng [ngModelOptions]thuộc tính like (được thử nghiệm trong Angular 7):

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

Tôi cũng đã tạo một ví dụ tại Stackblitz: https://stackblitz.com/edit/angular-abelrm

Thật không may, giải pháp được cung cấp bởi @hakani không ràng buộc hai chiều . Nó chỉ xử lý mô hình thay đổi một chiều từ phần UI / FrontEnd.

Thay vào đó là đơn giản:

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

sẽ thực hiện ràng buộc hai chiều cho hộp kiểm.

Sau đó, khi Mô hình hộp kiểmFlag được thay đổi từ Phần cuối hoặc phần UI - voila, hộp kiểmFlag lưu trạng thái hộp kiểm thực tế.

Để chắc chắn tôi đã chuẩn bị mã Plunker để trình bày kết quả: https://plnkr.co/edit/OdEAPWRoqaj0T6Yp0Mfk

Chỉ cần hoàn thành câu trả lời này, bạn nên đưa import { FormsModule } from '@angular/forms'vào app.module.tsvà thêm vào mảng nhập khẩu, tức là

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

[...]

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

Tôi đang làm việc với Angular5 và tôi đã phải thêm thuộc tính "name" để liên kết hoạt động ... "id" không bắt buộc để liên kết.

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

Tôi thích một cái gì đó rõ ràng hơn:

thành phần.html

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

thành phần

public saveUsername:boolean;

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

Khi sử dụng <abc [(bar)]="foo"/>cú pháp trên góc.

Điều này dịch là: <abc [bar]="foo" (barChange)="foo = $event" />

Có nghĩa là thành phần của bạn nên có:

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

Bạn chỉ có thể sử dụng một cái gì đó như thế này để ràng buộc dữ liệu hai chiều:

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

Để có được hộp kiểm làm việc, bạn nên làm theo tất cả các bước sau:

1. nhập FormsModule vào mô-đun của bạn
2. Đặt đầu vào bên trong một formthẻ

3. đầu vào của bạn phải như thế này:

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

   Lưu ý: đừng quên đặt tên trong đầu vào của bạn.

Bạn phải thêm name="selected"thuộc tính cho thành inputphần.

Ví dụ:

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

Tôi đã thực hiện một thành phần tùy chỉnh đã thử ràng buộc hai chiều

Thành phần: <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;
}

điều kỳ lạ là công trình này

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

trong khi điều này sẽ không

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

Trong mọi trường hợp, nếu bạn phải liên kết một giá trị với hộp kiểm không phải là boolean thì bạn có thể thử các tùy chọn bên dưới

Trong tệp 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>

trong thành phầnischeckedWithOutBoolean: any = 'Y';

Xem trong stackblitz https://stackblitz.com/edit/angular-5szclb?embed=1&file=src/app/app.component.html

Tôi biết đó có thể là câu trả lời lặp đi lặp lại nhưng đối với bất kỳ ai muốn tải danh sách các hộp kiểm với hộp kiểm selectall thành dạng góc tôi làm theo ví dụ này: Chọn tất cả / bỏ chọn tất cả hộp kiểm bằng góc 2+

nó hoạt động tốt nhưng chỉ cần thêm

[ngModelOptions]="{standalone: true}" 

HTML cuối cùng phải như thế này:

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

TypeScript

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

mong điều này giúp thnx

Một cách giải quyết để đạt được điều tương tự đặc biệt nếu bạn muốn sử dụng hộp kiểm cho vòng lặp for là lưu trữ trạng thái của hộp kiểm bên trong một mảng và thay đổi nó dựa trên chỉ mục của *ngFor vòng lặp. Bằng cách này bạn có thể thay đổi trạng thái của hộp kiểm trong thành phần của mình.

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

Chỉ thị góc của tôi như 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">

Trong hộp kiểm p góc,

Sử dụng tất cả các thuộc tính của hộp kiểm p

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

Và quan trọng hơn, đừng quên bao gồm [ngModelOptions]="{standalone: true}cũng như nó TIẾT KIỆM NGÀY CỦA TÔI.

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

tập tin .html

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

tập tin .ts

userConsent: boolean = false;