如何循环两个数组并进行比较，如果选中了相同的复选框Angular 2

我有一个包含所有办公室列表的数组。另一个数组是用户选择的列表。所以现在我想要显示所有的实习人员，如果所选列表中的值与办公室列表相同，那么复选框将被检查。这是我做到的。
代码如何循环两个数组并进行比较，如果选中了相同的复选框Angular 2

<div *ngFor="let item of officeLIST"> 
    <div *ngFor="let officeDATA of allOffice.office"> 
    <div *ngIf="item.office_id == officeDATA.office_id"> 
     <input #officeArray type="checkbox" id="officeArray" name="officeArray" class="form-control" value="{{item.officename}}" 
     checked> {{(item.officename == "" ? "--No data--" : item.officename)}} 
    </div> 
    <div *ngIf="item.office_id != officeDATA.office_id"> 
     <input #officeArray type="checkbox" id="officeArray" name="officeArray" class="form-control" value="{{item.officename}}">  {{(item.officename == "" ? "--No data--" : item.officename)}} 
    </div> 
    </div> 
</div>

并且结果是

我officeLIST

this.officeLIST = [ 
    { "office_id": "1", "officename": "Sun Dept" }, 
    { "office_id": "2", "officename": "Moon" }, 
    { "office_id": "3", "officename": "Stars" } 
]

allOffice.office阵列

"office": [ 
    { 
     "office_id": "1", 
     "officename": "Sun Dept" 
    }, 
    { 
     "office_id": "2", 
     "officename": "Moon Dept" 
    } 
    ]

来源

2017-04-07 user3431310

你能告诉我们数据of'officeLIST'和'allOffice.office'，只凭的console.log （），如果有console.post在这里的任何错误:) – IsuruAb

可能在你的* ngIf语句有一些问题 –

@IsuruAb看看我的更新问题 – user3431310

使用本solution.this工作正常，我。我在构造函数中完成了所有的事情。如果你想在一个方法中使用这个构造函数中的代码块。

这是我的TS文件：

officeLIST: Array<any> = [ 
    { "office_id": "1", "officename": "Sun Dept" }, 
    { "office_id": "2", "officename": "Moon" }, 
    { "office_id": "3", "officename": "Stars" } 
    ]; 


    office: Array<any> = [ 
    { 
     "office_id": "1", 
     "officename": "Sun Dept" 
    }, 
    { 
     "office_id": "2", 
     "officename": "Moon Dept" 
    } 
    ]; 
    newArray: Array<any> = []; 
    constructor() { 
    for (var i = 0; i < this.officeLIST.length; i++) { 

     var ismatch = false; // we haven't found it yet 

     for (var j = 0; j < this.office.length; j++) { 

     if (this.officeLIST[i].office_id == this.office[j].office_id) { 
      // we have found this.officeLIST[i]] in this.office, so we can stop searching 
      ismatch = true; 
      this.officeLIST[i].checked = true;// checkbox status true 
      this.newArray.push(this.officeLIST[i]); 
      break; 
     }//End if 
     // if we never find this.officeLIST[i].office_id in this.office, the for loop will simply end, 
     // and ismatch will remain false 
     } 
     // add this.officeLIST[i] to newArray only if we didn't find a match. 
     if (!ismatch) { 
     this.officeLIST[i].checked = false;// checkbox status false 
     this.newArray.push(this.officeLIST[i]); 
     } //End if 
    } 
    console.log(this.newArray); 

    }

这是我的html：

<div *ngFor="let item of newArray"> 
    <input type="checkbox" [checked]="item.checked"> {{item.officename}} 
</div>

来源

2017-04-07 08:29:45 IsuruAb

是的，这是行得通的。对不起，我忘了接受它 – user3431310

@ user3431310 :)很高兴帮助你。 – IsuruAb

您的用户选择的数组将具有所选复选框的ID。假设他选择了Sun部门和月亮，然后

this.userSelectedArray = ["1","2"]; 

<div *ngFor="let item of officeLIST"> 
     <input type="checkbox" [attr.checked]="userSelectedArray.indexOf(item.office_id) !== -1 ? true : false"> 
    </div>

来源

2017-04-07 06:14:50 RemyaJ

嗨我所有的复选框被检查..忘了提。所选阵列实际上是用户选择的默认值。而officeArray是显示一切的主要数组。所以如果用户选择了sam与officeArray，复选框将被选中。否则它不会 – user3431310

意味着它将迭代officeArray（总共3个数据）。该视图将显示所有这些。假设用户只选择2个数据，所以复选框只能被选中2，而其余的选项不被选中 – user3431310

因此，当用户更改复选框的状态时，其ID将被推送到selectedArray，然后您可以使用我的ans中的代码。 – RemyaJ

如何循环两个数组并进行比较，如果选中了相同的复选框Angular 2

回答

相关问题