Question

Angular 5，Typescript 2.7.1

我似乎无法在返回布尔值时检查复选框，我试过，<tr class="even" *ngFor="let item of rows"> <input value="{{item.check}}" type="checkbox" checked="item.check">返回true或false。

checked="false"

当在输入中写入选中时，始终选中复选框。并且在<input type="checkbox" [checked]="item.check == 'true'">时不会取消选中。

有没有更好的方法来使用Angular功能呢？像ngModel或ngIf ???

解决方案

import wx

class Panel1(wx.Panel):

    def __init__(self, parent, id):
        #self.log = log
        wx.Panel.__init__(self, parent, -1)
        self.slider0 = wx.Slider(self, -1, 0, 0, 10,style=wx.SL_LABELS,size=wx.Size(300, -1))
        self.slider1 = wx.Slider(self, -1, 0, 0, 10,style=wx.SL_LABELS,size=wx.Size(300, -1))
        self.slider2 = wx.Slider(self, -1, 0, 0, 10,style=wx.SL_LABELS,size=wx.Size(300, -1))
        self.slider3 = wx.Slider(self, -1, 0, 0, 10,style=wx.SL_LABELS,size=wx.Size(300, -1))
        sizer = wx.GridBagSizer(5,5)
        sizer.Add(self.slider0, (1,2))
        sizer.Add(self.slider1, (2,2))
        sizer.Add(self.slider2, (3,2))
        sizer.Add(self.slider3, (4,2))
        self.SetSizer(sizer)
        self.s = [self.slider0,self.slider1,self.slider2,self.slider3]
        x = [5,6,7,8]
        counter = 0
# Simple method using a list of sliders
#        for i in self.s:
#            i.SetValue(x[counter])
#            counter +=1

#Avoid using a list, quiz the contents of the panel for all slider elements
        children = self.GetChildren()
        for child in children:
            if child.GetClassName() == "wxSlider":
                child.SetValue(x[counter])
                counter += 1


app = wx.App()
frame = wx.Frame(None, -1, "slider test", size = (600, 350))
Panel1(frame, -1)
frame.Show()
app.MainLoop()

Answer 1

尝试：

[checked]="item.checked"

结帐：How to Deal with Different Form Controls in Angular

Answer 2

您可以使用此：

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

这里，记录是当前行的模型，状态是布尔值。

Answer 3

拥有对象的副本时，[checked]属性可能不起作用，在这种情况下，您可以通过以下方式使用(change)：

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

Answer 4

希望这将帮助某人开发具有自定义样式的自定义复选框组件。此解决方案也可以与表单一起使用。

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>

Answer 5

这是我的答案，

在row.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中的行

Answer 6

使用可观察对象的复选框

您甚至可以选择使用behaviourSubject来利用可观察物的力量，因此您可以从isChecked$可观察物开始一定的反应链。

在您的component.ts中：

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

在您的模板中

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

选中Angular 5，HTML，boolean on复选框

6 个答案: