Javascript 我在复选框中有两个列表，一个我已经选中，一个最初没有选中

我想在复选框中列出所有选中的值。如果我从xyz中选中somwething，则应将其推入列表中。如果我从列表xyz和模板中取消选中某些内容，则应将其从列表中拉出

{{item}}

{{item}

您可以使用

（change）

处理程序从数组中推送和删除项

<div *ngFor="let item of items">
  <input 
    type="checkbox" 
    name="{{item}}" 
    (change)="$event.target.checked ? selected.push(item) : selected.splice(selected.indexOf(item),1)">
  {{item}}
</div>

{{item}}

演示：

我创建了两个演示：

下面是其中最简单的一个，没有任何功能代码

menu.component.html

<div style="display: inline-flex;">
  <div style="padding: 5px;border: 1px solid;margin-left: 30px;width: 120px;height: 200px;">
    <p>list 1</p>
    <ul style="list-style: none;">
      <ng-container *ngFor="let i of list">
        <li *ngIf="!i.checked">
          <input type="checkbox" [name]="i.val" [id]="i.val" [checked]="i.checked" (change)="i.checked = !i.checked">
          <label [for]="i.val">item {{i.val}}</label>
        </li>
      </ng-container>
    </ul>
  </div>
  <div style="padding: 5px;border: 1px solid;margin-left: 30px;width: 120px;height: 200px;">
    <p>list 2</p>
    <ul style="list-style: none;">
        <ng-container *ngFor="let i of list">
          <li *ngIf="i.checked">
            <input type="checkbox" [name]="i.val" [id]="i.val" [checked]="i.checked" (change)="i.checked = !i.checked">
            <label [for]="i.val">item {{i.val}}</label>
          </li>
        </ng-container>
      </ul>
  </div>
</div>

---

到目前为止你做了什么？请显示一些您尝试过的代码。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.scss']
})
export class MenuComponent implements OnInit {
  list:any = [
    {val: 1, checked: false},
    {val: 2, checked: false},
    {val: 3, checked: false},
    {val: 4, checked: false},
    {val: 4, checked: false}
  ];
  constructor() { }

  ngOnInit() {
  }

}