如何通过单击链接删除PrimeNG数据表中的p-chips输入中的所有项目?

时间:2018-01-23 17:24:10

标签: angular primeng primeng-datatable

当用户点击“全部删除”时,我需要帮助删除PrimeNG数据表中的primeng p-chips输入中的所有项目。

在这种情况下,我想在用户点击删除所有链接时删除该行的所有carBrandOptions选项。我正在为此寻找打字稿代码。谢谢!

<p-column header="Column 5" editable]="true">
  <ng-template let-col let-carBrands="rowData" pTemplate="body">
    <p-multiSelect [options]="carBrandOptions" [(ngModel)]="carBrands[col.field]" defaultLabel='Select'
       [style]="{'width':'100%'}" (onChange)="onMultiSelectChanged($event)"></p-multiSelect>
      <div>
        <div>
            <p-chips [(ngModel)]="carBrands[col.field]">
            </p-chips>
        </div>
        <div>
          <a (click)="removeAll(carBrands)">remove all</a>
      </div>
      </div>
  </ng-template>  
</p-column>

1 个答案:

答案 0 :(得分:0)

关于打字稿代码,您只需要将一个空数组设置为您正在处理的行的options属性。

下面的内容应该足够了:

removeAll(carBrands) {
    carBrands.options = [];
}

关联的HTML:

<p-column header="Column 5" [editable]="true">
  <ng-template let-col let-carBrands="rowData" pTemplate="body">
    <p-multiSelect [options]="carBrandOptions" [(ngModel)]="carBrands['options']" defaultLabel='Select'
       [style]="{'width':'100%'}" (onChange)="onMultiSelectChanged($event)"></p-multiSelect>
      <div>
        <div>
            <p-chips [(ngModel)]="carBrands['options']">
            </p-chips>
        </div>
        <div>
          <a (click)="removeAll(carBrands)">remove all</a>
      </div>
      </div>
  </ng-template>  
</p-column>

见工作Plunker

这就是你要找的东西吗?