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

Question

我需要帮助删除在一个原始的p芯片输入primeng数据表中的所有项目，当用户点击“全部删除”。

在本例中，我希望在用户单击remove all链接时删除该行的所有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

关于typescript代码，您只需要为您正在处理的行的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>

请参见working Plunker

这就是你要找的吗？