角度反応型チェックボックスは、最初のクリックの後でのみ正しく切り替わります

Question

私は、フォームを動的に生成するチェックボックスと、サーバーからフォームデータを取得する初期取得要求（このチェックボックスはチェックされ、チェックされません。 trueまたはfalseの場合は0または1） チェックボックスをオンにすると、現在の値（0〜1、1〜0）の反対の正しいput要求を送信するだけでなく、チェックを入れたりオフにしたりすることになります。 今のところチェックされていないすべてのチェックボックスは期待どおりに機能しますが、最初からチェックされたボックスは一度だけクリックされ、チェックされずに0を送信すると1になります。 0の出力がある場合、そのチェックボックスは正しく機能します。チェックボックスの最初のクリックだけをねじ込んでいますか？

カンプ

places; 
    ready = false; 
    countriesForm: FormGroup; 

constructor(private whiteListService: WhiteListService) {} 

ngOnInit() { 
    // get places list with status' 
    this.whiteListService.getList() 
     .subscribe(
      (response: Response) => { 
       console.log(response.statusText); 
       this.places = response.json(); 
       this.createList(this.places.countries); 
      }, 
      (error) => console.log(error) 
     ); 
} 

createList(places) { 
    // assign this.places for dom binding access 
    this.places = places; 
    console.log(places) 
    this.countriesForm = new FormGroup({}); 
    for (let i = 0; i < this.places.length; i++) { 
     this.countriesForm.addControl(
      this.places[i].name, new FormControl() 
     ); 
    } 
    this.ready = true; 
} 

toggleAllowed(place, event) { 
    // send authorization of country to server 
    console.log('allow before switch', place.allow); 
    place.allow === 1 ? place.allow = 0 : place.allow = 1; 
    console.log('allow after switch', place.allow); 
    console.log(this.places); 
    this.whiteListService.sendAllow(place.code, place.allow) 
     .subscribe(
      (response) => console.log(response), 
      (error) => { 
       console.log(error); 
       place.allow = !place.allow; 
      } 
     ); 
} 

}

HTML

<div class="geo-list"> 
    <div class="content-box container"> 
     <form *ngIf="ready" [formGroup]="countriesForm"> 
      <div class="place" *ngFor="let place of places"> 
       <input 
        type="checkbox" 
        formControlName="{{place.name}}" 
        value="{{place.allow}}" 
        (change)="toggleAllowed(place, $event)" 
        [checked]="place.allow == 1" 
       > 
       {{ place.name }} | {{ place.code }} | {{ place.continent }} | {{ place.allow }} 
      </div> 
     </form> 
    </div> 
</div> 

Answer 1

いいえ、これを修正しました.toggleAllowed関数のswitch関数を変更すると、 '==='の代わりに '=='を使用します。 ts lintはこれにフラグを立てて、 '==='を使うことを提案します。理由は分かりません。

このメソッドは、コントロール値を事前定義するか、[check] = "place.allow"で定義することで機能します。

Answer 2

あなたはボックスがチェックされている場合、それは、今に関係なくあるようので、フォームコントロールに値を設定する必要がありますかそうでない場合、フォームコントロールの値は最初はnullになります。

私たちはあなたの反復でこの値をtrueまたは数値に応じてfalseに設定できます。

for (let i = 0; i < this.places.length; i++) { 
    this.countriesForm.addControl(
    this.places[i].name, new FormControl(this.places[i].allow == 1 ? true : false) 
); 
} 

、その後、あなたのテンプレートにcheckedを取り除くことができます：追記として

<input 
    type="checkbox" 
    formControlName="{{place.name}}" 
    (change)="toggleAllowed(place, $event)" 
> 

、理論的にはあなたはtrueで0と1切り替える必要はありませんと思いますとfalse、ここに記載：Is true == 1 and false == 0 in JavaScript?しかし、私はtrueとfalseを使用して固執するだろう:)