角度复选框黑客需要两次点击来显示错误

去掉上面写的那条线 checked="{{scProfile.Enabled}}" ,因为在使用时不需要 ngModel

Here is a fork of the plnkr to demonstrate

    //our root app component
import { Component, NgModule, VERSION } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'my-app',
    template: `
    <form #form="ngForm" class="edit-path__form">

        <div class="edit-path__form-container">
            <div class="grey-value-bold"></div>
            <div class="edit-path__form-sctypes">
                <div *ngFor="let scProfile of Profiles; let rowIndex = index" class="path-template" >
                    <label class="grey-title" style="flex-grow: 1;margin-left: 15px;" for="checkbox_{{rowIndex}}">{{scProfile.Name}}</label>
                    <div class="checkbox" style="border-bottom: 1px solid;">
                        <input
                                type="checkbox"
                                id="checkbox_{{rowIndex}}"
                                checked="{{scProfile.Enabled=== 'false'? null:''}}"
                                name="{{scProfile.ID}}"                                
                        >
                        <label for="checkbox_{{rowIndex}}" style="float: left; margin-left: -20px;"></label>
                    </div>
                </div>
            </div>

        </div>
    </form>
    `,
})
export class App {
    name: string;
    Profiles: any;
    constructor() {
        this.name = `Angular! v${VERSION.full}`;
        this.Profiles = [
        {Name: 'Alpha', ID: '1', Enabled: false},
        {Name: 'Beta', ID: '2', Enabled: false},
        {Name: 'Gamma', ID: '3', Enabled: false},
        {Name: 'Delta', ID: '4', Enabled: false},
        {Name: 'Zeta', ID: '5', Enabled: false},
        {Name: 'Rho', ID: '6', Enabled: false}
    ]
    }
}

@NgModule({
    imports: [BrowserModule, FormsModule],
    declarations: [App],
    bootstrap: [App],
})
export class AppModule {}