Angular 使用带有启动芯片和自动完成的自定义对象

我尝试使用

和

的组合来显示/添加/删除列表中的自定义对象，最终结果在功能上类似于拾取列表，但不会占用太多屏幕空间

应用程序组件.ts

app.component.html

可编辑芯片：
{{item.code}}:{{item.name}


{{item.code}}:{{item.name}








只读芯片：
{{item.code}}:{{item.name}

在priming文档之后，我设法使

能够正确地处理自定义对象，但我甚至无法使

显示对象，更不用说选择它们以添加到列表中了。我做错了什么

无法使用[dropdown]=“true”您可以使用[Field]定义显示文本

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);
  }
}

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>