Question

我正在尝试使用<p-chips>和<p-autocomplete>的组合来显示/添加/删除列表中的自定义对象，最终结果在功能上类似于PickList，但不占用屏幕空间很大。

app.component.ts

export class AppComponent implements OnInit {
  name = 'Angular';
  val: any;

  targetList = [
    {
      code: '0001',
      name: 'Subject 1'
    },
    {
      code: '0002',
      name: 'Subject 2'
    },
    {
      code: '0003',
      name: 'Subject 3'
    },
  ];

  sourceList = [
    {
      code: '0004',
      name: 'Subject 4'
    },
    {
      code: '0005',
      name: 'Subject 5'
    },
    {
      code: '0006',
      name: 'Subject 6'
    },
  ];

  ngOnInit() {

  }

  addItem(item: any) {
    this.targetList.push(item);
  }
}

app.component.html

Editable chips:
<p-chips [(ngModel)]="targetList" allowDuplicate="false">
  <ng-template let-item pTemplate="item">
      {{ item.code }}: {{ item.name }}
  </ng-template>   
</p-chips>

<br>

<p-autoComplete [(ngModel)]="val" [suggestions]="sourceList" dropdown="true" [minLength]="1" onSelect="addItem($event.value)" [forceSelection]="true" field="code">
  <ng-template let-item pTemplate="item">
    {{ item.code }}: {{ item.name }}
  </ng-template>
</p-autoComplete>

<br>
<br>
<br>
<br>

<!-- for pages that are read-only -->
Read-only chips:
<p-chips [(ngModel)]="targetList" disabled="true"> 
  <ng-template let-item pTemplate="item">        
    {{ item.code }}: {{ item.name }}       
  </ng-template>          
</p-chips>

在PrimeNG文档之后，我设法使<p-chips>与自定义对象一起正常工作，但是我无法使<p-autocomplete>甚至无法显示对象，更不用说选择它们了以进行添加到列表。我在这里做什么错了？

Obligatory stackblitz link

将自定义对象与PrimeNG芯片和自动完成功能配合使用

0 个答案: