Question

在ng2中，我想在单击该项目时选择多个项目，截至目前，它选择了一个单击的项目，但是，当我单击当前选择时，我还想保留已选择的项目。 / p>

HTML

<span class="tag" *ngFor="let selectedTagItem of tagsAvailable;let i = index" [ngClass]="{'activeTag': selectedIdx == i}" (click)="selectItem(i)">{{selectedTagItem}}</span>

TS

    export class listComponent implements OnInit {
     public tagsAvailable:string[] = ['Alabama', 'Alaska', 'Arizona', 'Arkansas',
        'California', 'Colorado']

    selectedIdx = 0;
    selectItem(index):void {
          this.selectedIdx = index;
      }
}

plnker：http://plnkr.co/edit/7b3VUnGERBspSU1JKEXi?p=preview

此代码，目前只选择我点击的一个项目，但是，我期待的是我想保留最后一个选择，之前如此。任何帮助

Answer 1

你应该使用如下

<p><span class="tag"
        *ngFor="let selectedTagItem of tagsAvailable;let i = index" 
      (click)="selectItem(i)">{{selectedTagItem}}</span></p>
      {{itemsSelected |json}}


selectItem(index):void {
      this.itemsSelected.push(index);

      console.log(this.itemsSelected);
  }

<强> LIVE DEMO

Answer 2

你也可以这样做。

  selectItem(index,event):void {  
    console.log(index);  
    event.target.attributes.class.nodeValue="tag activeTag"  
    this.itemsSelected.push(this.tagsAvailable[index]);  
    this.itemsSelectedIndex.push(index)  
  }

DEMO

如何在ng2中一次选择多个项目

2 个答案: