为什么切换一个复选框也会切换其他一些复选框？

Question

I built a table component. User can select which columns he wants to see.

You can try it on StackBlitz. Doesn't look nice without all the SCSS, but it shows the same phenomenon. https://stackblitz.com/edit/angular-she4fk

At start, only three checkboxes are checked, and the appropriate columns are visible.

When I toggle any one checkbox, the column gets shown or hidden, but other checkboxes get checked/unchecked as well. The columns are shown correctly, but the checkboxes are completely wrong. I don't see the problem, especially because the table and the underlying array behave as expected!

For this example, I begin in Frame 1 with the columns First name , Sur name and Department visible (and the corresponding checkboxes checked). Then I set the Selection checkbox: on-off-on. Every time, other checkboxes react (without the underlying array being changed).

I would like to understand why. And most importantly: How can I stop the other boxes from reacting? (Maybe interesting sidenote: The pattern is reproducible. When I reload the app (F5) and select the Selection checkbox, I can always reproduce these exact same "Frames 1-4". So the behaviour of the other checkboxes is not random.)

Here is the code, pretty straight forward.

export class AppComponent  {
    fieldTitle: string[] = [];
    fieldVisibility: boolean[] = [];

    constructor()
    {
        this.fieldTitle[0] = 'Selection';
        this.fieldTitle[1] = 'Personal number';
        this.fieldTitle[2] = 'Salutation';
        this.fieldTitle[3] = 'First name';
        this.fieldTitle[4] = 'Last name';
        this.fieldTitle[5] = 'Department';
        this.fieldTitle[6] = 'Company';

        this.fieldVisibility[0] = false;
        this.fieldVisibility[1] = false;
        this.fieldVisibility[2] = false;
        this.fieldVisibility[3] = true;
        this.fieldVisibility[4] = true;
        this.fieldVisibility[5] = true;
        this.fieldVisibility[6] = false;
    }

    toggleVisibility(fieldIdx: number) {
        console.log(fieldIdx + ' BEFORE toggle: ' + JSON.stringify(this.fieldVisibility));
        this.fieldVisibility[fieldIdx] = !this.fieldVisibility[fieldIdx];
        console.log(fieldIdx + ' AFTER  toggle: ' + JSON.stringify(this.fieldVisibility));
    }

    isVisible(fieldIdx: number) {
        console.log(fieldIdx + ' is ' + (this.fieldVisibility[fieldIdx] ? 'visible' : 'hidden'));
        return this.fieldVisibility[fieldIdx];
    }
}

And the template:

<table>
    <tr>
        <ng-container *ngFor="let visible of fieldVisibility; index as i;">
            <th *ngIf="visible">{{fieldTitle[i]}}</th>
        </ng-container>

        <th>
            <ul>
                <!-- solution: "let dummy of fieldTitle; index as i" -->
                <li *ngFor="let visible of fieldVisibility; index as i">
                    <label>
                        <input (change)="toggleVisibility(i)"
                              [checked]="isVisible(i)"
                              type="checkbox">
                        {{fieldTitle[i]}}
                    </label>
                </li>
            </ul>
        </th>
    </tr>
</table>

Answer 1

Use the fieldTitle array in the *ngFor instead of fieldVisibility . Like this: <ng-container *ngFor="let visible of fieldTitle; index as i">

Answer 2

you can not iterate over the same element you want to change, if you iterate over

<ng-container *ngFor="let visible of [0,1,2,3,4,5,6]; let i=index">

You has no problen. Even if you decided has only an unique array like

fields=[
      {title: 'Selection',visibility:false},
        {title: 'Personal number',visibility:false},
        {title: 'Salutation',visibility:false},
        {title: 'First name',visibility:true},
        {title: 'Last name',visibility:true},
        {title: 'Department',visibility:true},
        {title: 'Company',visibility:false}
    ]

You can do

<ng-container *ngFor="let field of fields; index as i;">
    <th *ngIf="field.visibility">{{fieldTitle[i]}}</th>
</ng-container>

(see that we can use field.visibility and field.title)

And

<input [(ngModel)]="field.visibility"
    [name]="'fieldSelectId'+i" 
    class="form-check-input" [id]="'fieldSelect'+i" type="checkbox" >

In this case you don't violate the rule "can not iterate over an element you change" because you change the "propertie" of an object, no the object itself