html - Angular 2 Checkbox Ràng Buộc Dữ Liệu Hai Chiều

Tôi khá mới với Angular2 và tôi có một chút vấn đề:

Trong Login-Component-HTML của tôi, tôi có hai hộp kiểm, mà tôi muốn liên kết dữ liệu hai chiều với Login-Component-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à 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']);
    }

Nếu tôi nhấn vào một ô 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ụ saveUsername trong thành phần, hộp kiểm không 'lấy' giá trị mới.

Vì vậy tôi không thể thao tác với hộp kiểm từ Component (như tôi muốn làm trong ngOnInit trong component).

Cảm ơn vì sự giúp đỡ của bạn!

Câu trả lời #1

Bạn có thể loại bỏ .selected khỏi saveUsername trong ô nhập checkbox của bạn vì saveUsername là kiểu boolean. Thay vì [(ngModel)] hãy 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: Như @newman đã nhận thấy khi ngModel được sử dụng trong một biểu mẫu, nó sẽ không hoạt động. Tuy nhiên, bạn nên sử dụng thuộc tính [ngModelOptions] như sau (đã 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

Câu trả lời #2

Đáng tiếc là giải pháp do @hakani cung cấp không phải là ràng buộc hai chiều. Nó chỉ xử lý việc thay đổi mô hình 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 Model checkboxFlag được thay đổi từ phần Backend hoặc UI - vậy là, checkboxFlag lưu trạng thái thực tế của checkbox.

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

Chỉ để hoàn thành câu trả lời này, bạn nên thêm import { FormsModule } from '@angular/forms' vào app.module.ts và thêm vào mảng imports, ví dụ

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

[...]

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

Câu trả lời #3

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

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

Câu trả lời #4

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

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

Câu trả lời #5

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