为什么复选框在表单中不起作用?

时间:2017-02-27 05:02:11

标签: forms angular

我有一个对象数组

Private Sub btnPayment_Click()
    Dim ws As Worksheet
    For Each ws In Excel.Worksheets
        If ws.Name = "Payroll" Then
            Set ws = Worksheets("Payroll")
                For counter = 0 To ws.UsedRange.Rows.Count
                    If ws.Cells(counter, 3).Value = txtStaffCode.Value Then
                        lblStatus.Caption = "Paid"
                    Else
                        i = ws.UsedRange.Rows.Count
                        j = ws.UsedRange.Rows.Count + 1
                         ws.Cells(i + 1, 1).Value = i
                         ws.Cells(i + 1, 2).Value = Format(Now, "[$-409]m/d/yyyy h:mm AM/PM;@")
                         ws.Cells(i + 1, 3).Value = txtStaffCode.Value
                         ws.Cells(i + 1, 4).Value = txtName.Value
                         ws.Cells(i + 1, 5).Value = Val(txtBaseSalary.Text)
                    End If
                Next counter
            Exit For
        End If
    Next
End Sub

并将其显示为复选框

pets = [{key: 'dog', isChecked: true}, {key: 'hamster', isChecked: false}, {key: 'cat', isChecked: false}];

但是一旦我开始把它放在表格中

<div *ngFor='let pet of pets'>
    <input type='checkbox'
     name='pets'
     value='{{pet}}'
     [(ngModel)]='pet.isChecked'
     (change)='check()'
    />
    {{pet.key}} - {{pet.isChecked}}
</div>

停止正确显示。

如何使用表单进行此操作?

Plunkr link

Plunkr link with a form

1 个答案:

答案 0 :(得分:1)

HTML:

<form>
        <div *ngFor='let pet of pets'>
            <input type='checkbox'
               name='pets'
               id="pets{{getRandom()}}"
               [ngModel]="pet.isChecked"
               value='{{pet}}'
               (click)="$event.stopPropagation(); check();"/>
            {{pet.key}} - {{pet.isChecked}}
        </div>
    </form>

TS:

function getRandom() {
    return Math.random() * 1000;
}