选中了“角度5”、“ HTML”、“复选框上的布尔值”

小开

最佳答案

try:

[checked]="item.checked"

check out: How to Deal with Different Form Controls in Angular

小开

Here is my answer,

In row.model.ts

export interface Row {
otherProperty : type;
checked : bool;
otherProperty : type;
...
}

In .html

<tr class="even" *ngFor="let item of rows">
<input [checked]="item.checked" type="checkbox">
</tr>

In .ts

rows : Row[] = [];

update the rows in component.ts

小开

Hope this will help somebody to develop custom checkbox component with custom styles. This solution can use with forms too.

HTML

<label class="lbl">


<input #inputEl type="checkbox" [name]="label" [(ngModel)]="isChecked" (change)="onChange(inputEl.checked)"
*ngIf="isChecked" checked>
<input #inputEl type="checkbox" [name]="label" [(ngModel)]="isChecked" (change)="onChange(inputEl.checked)"
*ngIf="!isChecked" >
<span class="chk-box \{\{isChecked ? 'chk':''}}"></span>
<span class="lbl-txt" *ngIf="label" >\{\{label}}</span>
</label>

checkbox.component.ts

    import { Component, Input, EventEmitter, Output, forwardRef, HostListener } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';


const noop = () => {
};


export const CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR: any = {
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => CheckboxComponent),
multi: true
};


/** Custom check box  */
@Component({
selector: 'app-checkbox',
templateUrl: './checkbox.component.html',
styleUrls: ['./checkbox.component.scss'],
providers: [CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR]
})
export class CheckboxComponent implements ControlValueAccessor {




@Input() label: string;
@Input() isChecked = false;
@Input() disabled = false;
@Output() getChange = new EventEmitter();
@Input() className: string;


// get accessor
get value(): any {
return this.isChecked;
}


// set accessor including call the onchange callback
set value(value: any) {
this.isChecked = value;
}


private onTouchedCallback: () => void = noop;
private onChangeCallback: (_: any) => void = noop;




writeValue(value: any): void {
if (value !== this.isChecked) {
this.isChecked = value;
}
}


onChange(isChecked) {
this.value = isChecked;
this.getChange.emit(this.isChecked);
this.onChangeCallback(this.value);
}


// From ControlValueAccessor interface
registerOnChange(fn: any) {
this.onChangeCallback = fn;
}


// From ControlValueAccessor interface
registerOnTouched(fn: any) {
this.onTouchedCallback = fn;
}


setDisabledState?(isDisabled: boolean): void {


}


}

checkbox.component.scss

   @import "../../../assets/scss/_variables";
/* CHECKBOX */


.lbl {
font-size: 12px;
color: #282828;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
cursor: pointer;
&.checked {
font-weight: 600;
}
&.focus {
.chk-box{
border: 1px solid #a8a8a8;
&.chk{
border: none;
}
}
}
input {
display: none;
}


/* checkbox icon */
.chk-box {
display: block;
min-width: 15px;
min-height: 15px;
background: url('/assets/i/checkbox-not-selected.svg');
background-size: 15px 15px;
margin-right: 10px;
}
input:checked+.chk-box {
background: url('/assets/i/checkbox-selected.svg');
background-size: 15px 15px;
}
.lbl-txt {
margin-top: 0px;
}


}

Usage

Outside forms

<app-checkbox [label]="'Example'" [isChecked]="true"></app-checkbox>

Inside forms

<app-checkbox [label]="'Type 0'" formControlName="Type1"></app-checkbox>

小开

You can use this:

<input type="checkbox" [checked]="record.status" (change)="changeStatus(record.id,$event)">

Here, record is the model for current row and status is boolean value.

小开

When you have a copy of an object the [checked] attribute might not work, in that case, you can use (change) in this way:

<input type="checkbox" [checked]="item.selected" (change)="item.selected = !item.selected">

小开

Work with checkboxes using observables

You could even choose to use a behaviourSubject to utilize the power of observables so you can start a certain chain of reaction starting at the isChecked$ observable.

In your component.ts:

public isChecked$ = new BehaviorSubject(false);
toggleChecked() {
this.isChecked$.next(!this.isChecked$.value)
}

In your template

<input type="checkbox" [checked]="isChecked$ | async" (change)="toggleChecked()">

小开

[checked]= "isChecked" This isChecked will be your varaible of type boolean in component.ts file i.e if you setb isChecked variable to true in component.ts ts checkbox will be checked and vice versa.

小开