0

我在 for 循环中有一个复选框列表，当我选择一个时，名称需要显示在 textarea 中，以便我继续选择它们需要添加，而当我取消选择它们时，它们需要被删除。我可以添加项目，但一次只能显示一个。我无法在 textarea 中显示数组。我在尝试删除取消选择的项目时也遇到了问题。请帮忙。下面是我的代码....

复选框

<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 是否有帮助。请指导....

4

2 回答 2

1

这是关于我将如何处理它的 stackblitz 示例。

要点如下：

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

希望有帮助

于 2018-04-17T20:17:29.220 回答
0 
<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
}
于 2018-04-18T04:42:47.813 回答