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

Question

我在 for 循环中有一个复选框列表，因为我 select 一个名称需要显示在文本区域中，所以当我保持 selecting 时，它们需要被添加，因为我deselect 他们需要被删除。我可以添加项目，但一次只能显示一个。我无法在文本区域中显示数组。我在尝试删除 deselected 项目时也遇到了问题。请帮忙。下面是我的代码....

复选框

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

也帮我解决如果我要取消选择，我该如何从数组中删除项目名称。我试图为此检查 indexof 不确定是否有帮助。请指导....

Answer 1

Here 是关于 stackblitz 的一个例子，说明我会如何处理它。

主要有以下几点：

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

希望对您有所帮助

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

在你的 component.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
}

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

Adding an array of items to textarea when selecting checkboxes in Angular 2

checkbox

textarea

angular2-template

angular2-inputs

angular