如何通过单击 link 删除 PrimeNG 数据表中 p 芯片输入中的所有项目？

Question

当用户点击 "remove all" 时，我需要帮助删除 Primeng p 芯片输入中 PrimeNG 数据表中的所有项目。

在这种情况下，我想在用户点击删除所有 link 时删除该行的所有 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>

Answer 1

关于打字稿代码，您只需将一个空数组设置为您正在处理的行的 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

这就是您要找的吗？

如何通过单击 link 删除 PrimeNG 数据表中 p 芯片输入中的所有项目？

How to remove all the items in an p-chips input inside PrimeNG datatable by clicking on a link?

primeng

angular

primeng-datatable