Angular 5, HTML, boolean on 확인란이 선택되어 있습니다.

Angular 5, HTML, boolean on 확인란이 선택되어 있습니다.

각도 5, 유형 스크립트 2.7.1

부울을 반환할 때 확인란이 선택되지 않는 것 같습니다. 시도해 보았습니다.item.checktrue 또는 false를 반환합니다.

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

이 확인란은 항상 선택되어 입력 내부에 기록됩니다.그리고 그것은 언제든지 선택 해제되지 않습니다.checked="false".

대신 Angular 기능으로 할 수 있는 더 좋은 방법이 있습니까?like ngModel 또는 ngIf?

해결책

<input type="checkbox" [checked]="item.check == 'true'">

시도:

[checked]="item.checked"

체크아웃: 각도에서 다양한 폼 컨트롤을 처리하는 방법

다음을 사용할 수 있습니다.

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

여기서 레코드는 현재 행의 모델이고 상태는 부울 값입니다.

개체의 복사본을 가지고 있을 때[checked]속성이 작동하지 않을 수 있습니다. 이 경우 사용할 수 있습니다.(change)다음과 같은 방식으로:

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

이것이 누군가 사용자 정의 스타일로 사용자 정의 확인란 구성 요소를 개발하는 데 도움이 되기를 바랍니다.이 솔루션은 양식에서도 사용할 수 있습니다.

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

}

사용.

외부 양식

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

내부 양식

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

여기 제 대답이 있습니다.

행.model.ts

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

.html 내

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

.ts 단위

행 : 행[] = [];

component.ts의 행을 업데이트합니다.

관찰 가능한 항목을 사용하여 확인란 작업

사용할 수도 있습니다.behaviourSubject관찰 가능한 힘을 활용하여 특정 반응 사슬을 시작할 수 있습니다.isChecked$관측할 수 있는

구성 요소의 .ts:

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

템플릿에서

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

[checked]= "isChecked" 이 항목은 component.ts 파일에서 boolean 형식의 변수가 됩니다. 즉, bisbisChecked variable을 component.ts에서 true로 설정한 경우에는 이 항목이 선택되고 그 반대도 마찬가지입니다.

<입력 유형="type" [checked]="item.checked == true">

언급URL : https://stackoverflow.com/questions/49030977/angular-5-html-boolean-on-checkbox-is-checked