从Angular中的PrimeNG PickList中删除按钮

npm install primeng primeicons

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { PickListModule } from 'primeng/picklist';
import { ButtonModule } from 'primeng/button';

import 'primeicons/primeicons.css';
import 'primeng/resources/themes/saga-blue/theme.css';
import 'primeng/resources/primeng.min.css';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    PickListModule,
    ButtonModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <p-pickList
      [source]="sourceItems"
      [target]="targetItems"
      [sourceHeader]="'可选项目'"
      [targetHeader]="'已选项目'"
      (onMoveToTarget)="removeItem($event)"
    >
      <ng-template let-item pTemplate="item">
        {{ item }}
      </ng-template>
    </p-pickList>
  `
})
export class AppComponent {
  sourceItems: string[] = ['Item 1', 'Item 2', 'Item 3'];
  targetItems: string[] = [];

  removeItem(item: string) {
    const index = this.targetItems.indexOf(item);
    if (index !== -1) {
      this.targetItems.splice(index, 1);
    }
  }
}