Fatal编程技术网
  • javascript/
  • Javascript 我想从mat复选框中选中的项目列表

Javascript 我想从mat复选框中选中的项目列表

javascript angular typescript list checkbox

Javascript 我想从mat复选框中选中的项目列表,javascript,angular,typescript,list,checkbox,Javascript,Angular,Typescript,List,Checkbox,我有一个项目数组[Bille，Joe，Sam，Finn]和一个朋友数组[]。 我在下面的HTML模板中的mat复选框中显示各个项目 <span class="listLeft " *ngFor="let item of xyz"> <mat-checkbox [labelPosition]= "'before'" class="custom-checkbox required" aria-label="checkbox" disableRipple="false">

我有一个
项目
数组
[Bille，Joe，Sam，Finn]
和一个
朋友
数组
[]
。
我在下面的
HTML
模板中的
mat复选框中显示各个
项目


<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


如果我的html不可见{{item}，请使用cdk中的“选择模型”。看看有相当多的文档和stackblitz示例：）。使用链接时搜索“复选框”。-可以使用“选择多个”

friends = [Billie,Joe]



<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> 



  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)
   }
  }