在 Angular 2 中选中复选框时将项目数组添加到文本区域

Question

我在 for 循环中有一个复选框列表，当我选择一个时，名称需要显示在文本区域中，以便我不断选择它们需要添加它们，当我取消选择它们时需要删除它们。我可以添加项目，但一次只支付一个。我无法在文本区域中显示数组。此外，我在尝试删除取消选择的项目时也遇到了问题。请帮忙。下面是我的代码。

复选框

<div *ngFor="let items of itemList">
  <div class="xxx"><input type="checkbox" id="chk" name="checker" (click)="AddToTextArea(items.Name)" />
   {{items.Name}}
  </div>
</div>

文本区域

<textarea class="ttt" id="itemList" name="itemName" rows="5" [(ngModel)]="displayItemNameList"></textarea>

组件方法

public displayItemNameList = [];
AddToTextArea(iName){
  this.displayItemNameList.push(iName);
}

也帮助我 如果我正在去选择，如何从数组中删除项目 Name。我试图检查索引，不确定这是否有帮助。请指导....

Answer 1

这是一个关于堆栈闪电战的例子，说明我将如何对待它。

主要有以下几点：

1. 您可以使用复选框在表示所选项目的数组中添加或删除项目。
2. 然后，你为组件中的另一个变量创建一个 getter，负责发送数组的字符串表示形式(例如，你可以使用 toString(( 进行基本显示(。
3. 最后，将此字符串变量绑定到文本区域。

希望有帮助

Answer 2

<div *ngFor="let items of itemList;let i=index">
  <div class="xxx"><input type="checkbox" id="chk" name="checker{{i}}" (click)="AddToTextArea(items.Name)" />
   {{items.Name}}
  </div>
</div>

<textarea class="ttt" id="itemList" name="itemName" rows="5">
{{showselected()}}</textarea> // you can also iterate a list here with ngFor

在你的组件.ts中，

displayItemNameList = [];
AddToTextArea(iName){
  if(this.displayItemNameList.indexOf(iName)>-1){
  this.displayItemNameList.splice(this.displayItemNameList.indexOf(iName),1);
  }else{
   this.displayItemNameList.push(iName);
  }
}
showselected(){
 this.displayItemNameList.toString(); // this is basic string representation of array
}