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

为什么不使用其他编码？我想以类似的方式

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];
    }
 }

Answer 2

我终于找到了问题。

当我遍历表时，数组是通过复制引用的。为了取消引用数组，我需要复制原始数组，然后使用该复制的数组粘贴我的对象。因此，两个实体将不会连接。

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

Deep copy an array in Angular 2 + TypeScript

复制表格中的值后如何切换复选框

2 个答案: