角度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：plunkerに2つのボタンのhttps://plnkr.co/edit/YSItU48QflE4GZbj58Ev?p=preview

クリックして、私は期待通りに動作しますが、チェックボックスの更新「をチェック」リストによります。しかし、「アイテム2」をクリックしてリセットをクリックすると、「アイテム2」がクリアされません。

また、私は[ngModel]と[attr.checked]を使ってみました。 私が[(ngModel)]を使用したくない理由は、サーバーリクエストをトリガーする@Output()も持っていて、それが失敗すると、チェックボックスが更新されるかどうかです。私は州のためにngrxを使用しています。

UPDATE：

だから私は、私はngrx Reduxの/を使用していて、私のチェックリスト・コンポーネントにして送られたリストは、コンポーネント自身によって直接変異されるべきではないという私の質問に十分に明確ではありませんでした。 https://plnkr.co/edit/lMouWapI2lb9U6mS9YMy?p=preview

UPDATE 2：だから私は持っている問題は、そのクリック/チェックがにアップデートを送信します

である私は、相続人の新しいplnkerを変更

に出力を返送するコンポーネントを更新しましたサーバーが失敗した場合、チェックボックスを以前の状態にリセットします。 サーバのリクエストが成功した場合はランダムなブールを追加しました。 おそらく、私はこのために間違ったタイプの実装ideを使用しています。

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

Answer 1

あなたは

チェックリスト、これまでのチェックが変更されたときにもcheck-list compoenntにチェックインの配列を更新する必要が

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

Plunker!!

を更新しましたが、この情報がお役に立てば幸い！