Как сделать флажок после копирования значения в таблице

Question

checklist = [ '1', '2', '3', '4', '5', '6'...];
user = {[ {"name": "tom", "checkbox": [ '1_A', '3_B' ]}, 
          {"name": "sam", "checkbox": [ '1_C', '3_A' ]} ...



...  
    <tr *ngFor="let checks of checklist ;  let i=index">
        <td *ngFor="let item of user">
            <div class="form-container">
                <input class="check a" [checked]="item.checkbox[i].A" (change)="change(item.checkbox[i], 'a')" [defaultChecked]="item.checkbox[i].A" type="checkbox" value="item.checkbox[i].A"  />
                <input class="check b" [checked]="item.checkbox[i].B" (change)="change(item.checkbox[i], 'b')" [defaultChecked]="item.checkbox[i].B" type="checkbox" value="item.checkbox[i].B"  />
                <input class="check c" [checked]="item.checkbox[i].C" (change)="change(item.checkbox[i], 'c')" [defaultChecked]="item.checkbox[i].C" type="checkbox" value="item.checkbox[i].C"  />
            </div>
        </td>
    </tr>
...

Вот мой компонент ts

    paste(user: User) {
          if (user !== undefined && user.checkbox !== undefined) {
             setTimeout(() => {
              for (let i = 0; i < this.jsonData.length; i++) {
                  if (this.jsonData[i].id === user.id) {
                    this.jsonData[i].checkbox = this.copiedCheckbox;
                  }
              }
             });
          }
    }

    copy(user: User) {
        if (user !== undefined && user.checkbox!== undefined) {
          this.copiedCheckbox = user.checkbox;
        }
    }

      change(current: User, box: string) {
      if (box === 'a') {
        current.a = !current.a;
        current.b = false;
        current.c = false;
      }
      if (box === 'b') {
        current.b = !current.b;
        current.c = false;
        current.a = false;
      }
      if (box === 'c') {
        current.c = !current.c;
        current.b = false;
        current.a = false;
      }
  }

Краткое объяснение: поэтому из приведенного выше кода я ожидал, что флажок будет активен только по одному на столбец (из 3 флажков).Он работает нормально, пока я не начал копировать / вставлять элементы, копирование и вставка работает нормально, но после вставки я начал видеть зеркальные результаты.Если я нажал на флажок вместо того, чтобы текущий флажок изменился, он поменяет как скопированный флажок, так и вставленный флажок.Почему это происходит?

 ---Before copy
               (tom)                         |               (sam)                    
 Type      A           B          C          |        A           B          C                     
  1    [CheckBox[x]| CheckBox[] | CheckBox[] |  [CheckBox[] | CheckBox[] | CheckBox[x]
  2    [CheckBox[] | CheckBox[] | CheckBox[] |  [CheckBox[] | CheckBox[] | CheckBox[]
  3    [CheckBox[] | CheckBox[x]| CheckBox[] |  [CheckBox[x]| CheckBox[] | CheckBox[]
  ...
 ---After copy---
                (tom)                         |              (sam)              
 Type      A           B          C           |        A           B          C                     
  1    [CheckBox[x]| CheckBox[] | CheckBox[]  |  [CheckBox[x]| CheckBox[] | CheckBox[]
  2    [CheckBox[] | CheckBox[]  | CheckBox[] |  [CheckBox[] | CheckBox[]  | CheckBox[]
  3    [CheckBox[] | CheckBox[x] | CheckBox[] |  [CheckBox[] | CheckBox[x] | CheckBox[]

 ---Select 1_B from sam after copy, the checkbox is duplicated to tom's table ---
                (tom)                         |              (sam)              
 Type      A           B          C           |        A           B          C                     
  1    [CheckBox[] | CheckBox[x] | CheckBox[] |  [CheckBox[] | CheckBox[x]| CheckBox[]
  2    [CheckBox[] | CheckBox[]  | CheckBox[] |  [CheckBox[] | CheckBox[]  | CheckBox[]
  3    [CheckBox[] | CheckBox[x] | CheckBox[] |  [CheckBox[] | CheckBox[x] | CheckBox[]  

Answer 1

Я наконец нашел проблему.

Когда я перебираю таблицу, на массив ссылаются посредством копирования.Чтобы разыменовать массив, мне нужно сделать копию исходного массива, а затем использовать этот скопированный массив для вставки моего объекта.Поэтому два объекта не будут связаны.

      setTimeout(() => {
        let checkbox: Checkboxes[] = this.copiedCheckbox.map(x => Object.assign({}, x));
        this.copiedCheckbox= checkbox; });
    }

Глубокая копия массива в Angular 2 + TypeScript

Answer 2

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

checklist = [ '1', '2', '3', '4', '5', '6']
//see that user is an array
user = [ {"name": "tom", "checkbox": [0,2,null], 
         {"name": "sam", "checkbox": [2,null,1]}
         ...
       ]

<tr *ngFor="let checks of checklist ;  let i=index">
        <td *ngFor="let item of user">
            <div class="form-container">
                <input type="checkbox" class="check a" [checked]="item.checkbox[0]==i"
                      (change)="item.checkbox[0]=item.checkbox[0]==i?null:i" />
                <input type="checkbox" class="check b" [checked]="item.checkbox[1]==i"
                      (change)="item.checkbox[1]=item.checkbox[1]==i?null:i" />
                <input type="checkbox" class="check c" [checked]="item.checkbox[2]==i"
                      (change)="item.checkbox[2]=item.checkbox[2]==i?null:i" />
            </div>
        </td>
    </tr>
    <div>
    <!---just for check--->
    {{user|json}}
    </div>

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

//You create a variable called
userCopy:User
copy(user:User)
{
    this.userCopy=user;
}
paste(user:User)  //The argument in to which user you copy "this.userCopy"
{
    if (this.userCopy)
    {
        user.checkbox[0]=this.userCopy.checkbox[0];
        user.checkbox[1]=this.userCopy.checkbox[1];
        user.checkbox[2]=this.userCopy.checkbox[2];
    }
 }

.