Angular 反应式复选框只有在第一次点击后才能正确切换

Question

我有一个动态生成的复选框表单，以及一个从服务器获取表单数据的初始获取请求（哪些复选框被选中和未选中，由 0 或 1 的值定义为真或假) 当我单击一个复选框时，它应该切换 (checked/unchecked) 并发送正确的放置请求（与当前值相反（0 到 1、1 到 0）。现在，所有未选中的复选框都按预期运行。但是从最初得到选中的框，单击一次，然后取消选中并在应该发送 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

您需要将值设置为表单控件，因为现在无论该框是否选中，表单控件的值最初都是 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)"
>

作为旁注，理论上你不需要在 0 和 1 之间切换 true 和 false，如这里所述：Is true == 1 and false == 0 in JavaScript? 但我会坚持使用 true 和 false :)

Answer 2

好的，所以我解决了这个问题，通过更改 toggleAllowed 函数中的开关函数使用“==”而不是“===”。虽然 ts lint 标记了这一点并建议“===”，但它不会与“===”一起使用。不知道为什么。

此方法适用于预定义控制值，或使用 [check]="place.allow".

定义它们

Angular 反应式复选框只有在第一次点击后才能正确切换

Angular reactive checkboxes only toggle correctly after first click

angular

checkbox

angular-reactive-forms