При отмене изменений, флажок все еще имеет то же состояние

Question

У меня небольшая проблема, из-за которой возникают головные боли.

У меня есть модал, в котором я показываю некоторую информацию с флажками, информация поступает из массива, и я устанавливаю состояния флажков из этого массива,и пример массива:

this.array = [
{scope: "acc", code: "1", alias: "aaa", selected: true, editable: true},
{scope: "acc", code: "2", alias: "bbb", selected: true, editable: true}
]

Я хочу играть с чеками как обычно, но когда я нажимаю кнопку discardChanges, флажки возвращают состояние, в котором они были ранее.

 <div *ngFor="let account of allAccountsList; let i = index;" class="">

          <div class="row">

              <input (click)="saveCheck(account.code, account.scope)" [(checked)]="account.selected"
                type="checkbox" name="genres" value="adventure" id="{{i}}">
              <label for="{{i}}" style="font-family: 'SExtralight'; font-size:14px;"></label>
            </div>
</div>

Спасибо всем.

Answer 1

Этот код:

<div *ngFor="let account of array1; let i = index;">

    <input [checked]="account.selected"
                type="checkbox" 
                name="genres" 
                id="{{i}}">
    <label for="{{i}}" 
              style="font-size:14px;">{{ account.alias }}
    </label>
</div>

Обновляет ли не свойство selected базового массива.

Этот код:

<div *ngFor="let account of array2; let i = index;">

    <input [(ngModel)]="account.selected"
                type="checkbox" 
                name="genres" 
                id="{{i}}">
    <label for="{{i}}" 
              style="font-size:14px;">{{ account.alias }}
    </label>
</div>
<div>

Обновляет ли свойство selected базового массива.

Используйте первый набор кода, если вы хотите убедиться, что данные базового массива не изменены.

Но если вам нужно отслеживать изменения, когда пользователь нажимает и , разрешают опцию отмены изменений, используйте второй набор кода.Затем в компоненте скопируйте массив, чтобы сохранить исходные значения:

  ngOnInit() {
    // Save a copy of the original values
    this.array2Copy = this.array2.map(e => ({...e}));
    console.log(JSON.stringify(this.array2Copy));
  }

  discardChanges() {
    // Copy the original values over the array
    this.array2 = this.array2Copy.map(e => ({...e}));
    console.log(JSON.stringify(this.array2Copy));
  }

У меня есть стек в этом коде: https://stackblitz.com/edit/angular-arraycopy-deborahk