Angulaire 5, HTML, boolean sur la case à cocher est cochée

Angulaire 5, Tapuscrit 2.7.1

Je n'arrive pas à obtenir la case à vérifier au moment de retourner un booléen, j'ai essayé, item.check renvoie vrai ou faux.

<tr class="even" *ngFor="let item of rows">
<input value="{{item.check}}" type="checkbox" checked="item.check">

La case est toujours cochée cochée est écrite à l'intérieur de l'entrée. Et il ne fait pas désactivée lorsque checked="false".

Est-il une meilleure façon de le faire avec des traits Angulaires à la place? comme ngModel ou ngIf???

Solution

<input type="checkbox" [checked]="item.check == 'true'">
  • en supposant que l'élément est un objet qui contient un chèque boolean dans votre ts - utilisation ngModel sur votre case. [(ngModel)]="item.check"
InformationsquelleAutor Mr. Toast | 2018-02-28
  1. 68

    essayer:

    [checked]="item.checked"

    découvrez: La façon de Traiter avec les Différents Contrôles de Formulaire dans Angulaire

    • Merci, j'ai essayé mais j'ai besoin d'ajouter <input type="checkbox" [vérifié]="élément.vérifiez == 'true'"> puis il travaille, thx
    • C'est parce que votre article.vérifier l'est de la Chaîne Booléen not élément.vérifiez = true; //boolean élément.vérifiez = 'true'; //chaîne
    InformationsquelleAutor ProfitWarning
  2. 10

    Vous pouvez utiliser ceci:

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

    Ici, le record est le modèle pour le courant de ligne et l'état est une valeur booléenne.

    • comment faire pour extraire la valeur booléenne à partir de $event en ts composant?
    • pour l'extraction, vous devez utiliser événement.cible.checked de la valeur. si c'est vrai , la case est cochée, et non le contraire.
    InformationsquelleAutor Abdus Salam Azad
  3. 7

    Espère que cela va aider quelqu'un à développer des composant checkbox avec des styles personnalisés. Cette solution peut utiliser avec des formes trop.

    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>

    case.composante.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 {
}
}

    case.composante.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;
} 
}

    Utilisation

    En dehors des formes

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

    À l'intérieur de formes

    <app-checkbox [label]="'Type 0'" formControlName="Type1"></app-checkbox>
    InformationsquelleAutor Janith Widarshana
  4. 3

    Lorsque vous avez une copie d'un objet de la [checked] attribut peut ne pas fonctionner, dans ce cas, vous pouvez utiliser (change) de cette façon:

            <input type="checkbox" [checked]="item.selected" (change)="item.selected = !item.selected">
    InformationsquelleAutor Colo Ghidini
  5. 1

    Voici ma réponse,

    En ligne.de modèle.ts

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

    Dans .html 

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

    Dans .ts

    lignes : Ligne[] = [];

    mettre à jour les lignes dans le composant.ts

    InformationsquelleAutor Dhanika