以编程方式设置 Angular 4 复选框

我见过类似的问题，但我仍然不明白。 我有一个组件女巫获取项目列表Array<{id: number, name: string}>以及“已检查”项目的列表Array<number>

@Component({
    selector: 'check-list',
    template: `
    <div class="form-check" *ngFor="let item of list">
        <label class="form-check-label">
            <input class="form-check-input" 
                type="checkbox" 
                [checked]="checked.includes(item.id)"
                (change)="onChange.emit({id: item.id, value: $event.target.checked})">
            {{ item.name }}
        </label>
    </div>
    `
})

export class CheckListComponent {
    @Input() list: CheckListItem[];
    @Input() checked: number[];

    @Output() onChange: EventEmitter<any> = new EventEmitter();

    constructor() { }
}

如果我更新“选中”列表，则呈现的复选框列表也会更新，但如果我单击某些复选框，然后更新“选中”列表，它不会按我的预期呈现。

笨蛋：https://plnkr.co/edit/YSItU48QflE4GZbj58Ev?p=preview https://plnkr.co/edit/YSItU48QflE4GZbj58Ev?p=preview

单击插件中的两个按钮，它按我的预期工作，复选框根据“已检查”列表进行更新。但是，如果我单击“项目 2”，然后单击“重置”，则不会清除“项目 2”。

我也尝试过使用[ngModel] and [attr.checked]。 我不想使用的原因[(ngModel)]是我也有一个@Output()这会触发服务器请求，如果失败，则复选框应该更新或不更新。我在用着ngrx对于各州来说。

UPDATE:

因此，我在问题中不够清楚，我正在使用 Redux/ngrx，并且发送到我的检查列表组件的列表不应由组件本身直接改变。我已经更新了组件以发回更改后的输出

这是新的笨蛋：https://plnkr.co/edit/lMouWapI2lb9U6mS9YMy?p=preview https://plnkr.co/edit/lMouWapI2lb9U6mS9YMy?p=preview

更新2：

所以我遇到的问题是单击/检查会将更新发送到服务器，如果失败，我希望将复选框重置为之前的状态。 如果服务器请求成功或失败，我添加了一个随机布尔值。 也许我为此使用了错误类型的实现IDE。

笨蛋：https://plnkr.co/edit/nGyS8oYWVzzRULgzcDQV?p=preview https://plnkr.co/edit/nGyS8oYWVzzRULgzcDQV?p=preview

您需要更新中的检查数组check-list每当检查更改时组件也会发生变化，

检查清单

@Component({
    selector: 'check-list',
    template: `
    <div class="form-check" *ngFor="let item of list">
        <label class="form-check-label">
            <input class="form-check-input" 
                type="checkbox" 
                [checked]="checked.includes(item.id)"
                (change)="onChange.emit({id: item.id, value: $event.target.checked})">
            {{ item.name }}
        </label>
    </div>
    `
})    
export class CheckListComponent {
    @Input() list: CheckListItem[];
    @Input() checked: number[];
    
    @Output() onChange: EventEmitter<any> = new EventEmitter();

    constructor() { }
}

App

@Component({
   selector: 'my-app',
   template: `
    <div>
      <h2>Hello {{name}}</h2>
      <check-list [list]="list" [checked]="checked" 
        (onChange)="updateChecked($event)"></check-list>
      <button (click)="setFirstChecked()">Set First Checked</button>
      <button (click)="resetChecked()">Reset Checked</button>
    </div>
   `
})
export class App {      
  ....
  updateChecked($event) {
    // This will be handled in Redux/ngrx...
    if ($event.value) {
      this.checked.push($event.id);
    } 
    else {
      this.checked = this.checked.filter((i) => i !== $event.id);
    }
  }
  ...
}

更新了笨蛋！！ https://plnkr.co/edit/ob6FAjsxfmHkJOhd4lCz?p=preview