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

Question

我看到过类似的问题，但我仍然不明白。 我有一个组件女巫获取项目列表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() { }
}

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

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

单击 plunker 中的两个按钮，它按我预期的方式工作，复选框根据“选中”列表更新。但是如果我点击“item 2”然后点击reset，它不会清除“item 2”。

我也尝试过使用[ngModel] 和[attr.checked]。 我不想使用[(ngModel)] 的原因是我还有一个@Output() 触发服务器请求，然后如果失败，复选框应该更新与否。我使用ngrx 表示状态。

更新：

所以我的问题不够清楚，我正在使用 Redux/ngrx，发送到我的 check-list-component 的列表不应该由组件本身直接改变。我已更新组件以在更改时发回输出

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

更新 2：

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

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

Answer 1

当检查更改时，您还需要更新 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() { }
}

应用

@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);
    }
  }
  ...
}

更新了Plunker!!