我想从 mat 复选框中选中的项目制作一个列表答案

【问题标题】：I want to make a list from the items that are checked in mat checkbox我想从 mat 复选框中选中的项目制作一个列表
【发布时间】：2019-12-06 15:50:44
【问题描述】：

我有一个items 数组[Bille,Joe,Sam,Finn] 和一个friends 数组[]。我在以下HTML 模板中的每个mat-checkbox 中显示单个items。

<span class="listLeft " *ngFor="let item of xyz">
   <mat-checkbox [labelPosition]= "'before'" class="custom-checkbox required" aria-label="checkbox" disableRipple="false">{{item}}</mat-checkbox>
</span>

现在，如果我从 HTML 页面中选择让我们说 Bille And Joe，我想将值填充到 friends 数组中。

friends = [Billie,Joe]

【问题讨论】：

我的 html 如果不可见是 {{item}}
嘿，使用 cdk 中的“选择模型”。查看material.angular.io/components/table/overview 有很多文档和一个stackblitz 示例:)。使用链接时搜索“复选框”。
stackblitz.com/edit/angular-8vhukc - 你可以使用 mat-select multiple

标签： javascript angular typescript list checkbox

【解决方案1】：

试试这样：

.html

<span class="listLeft " *ngFor="let item of xyz">
     <mat-checkbox (change)='onChange(item)' [labelPosition]=  "'before'" class="custom-checkbox  required" aria-label="checkbox" disableRipple="false">{{item}}</mat-checkbox>  
</span>

.ts

  names = ["Bille", "Joe", "Sam", "Finn"];
  friends = []

  onChange(value: any) {
   if(this.friends.includes(value)) {
     this.friends.splice(this.friends.indexOf(value),1)
   } else {
     this.friends.push(value)
   }
  }

Working Demo

【讨论】：