Primeng p-chips：无法动态添加对象

Question

我正在将对象数组 value1 传递给 p-chips 组件。

app.component.ts

import { Component } from '@angular/core';
import {MenuItem} from 'primeng/api';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent { 
    values1: any[] = [{key:'1', value:'one'}];
    key: string;
    value: string;
    
    add() {
      this.values1.push({key: this.key, value:this.value});
      console.log(this.values1);
    }
}

app.component.html

<div class="p-fluid">
  <h5>Basic</h5>
  <p-chips field="value" [(ngModel)]="values1" ></p-chips>
  Add key
   <input id="key" type="text" [(ngModel)]="key" />
  <br/>
  Add value
  <input id="value" type="text" [(ngModel)]="value" />
  <button (click)="add()">Add</button>
</div>

初始值 {key:'1', value:'one'} 反映在 p 筹码中。但是，如果我调用 add 函数将对象添加到变量 value1，新对象被添加到 value1 但它没有反映在 p-chips

这是demo

EDIT: 我在添加对象后点击了p-chips模板，对象反映出来了，但是没有点击怎么自动完成？

Answer 1

不要推送到数组，而是创建一个新数组。这与更改检测以及该组件的实现方式有关：

add() {
      this.values1 = [...this.values1, {key: this.key, value:this.value}]
      console.log(this.values1);
    }

Primeng p-chips：无法动态添加对象

Primeng p-chips: unable to add object dynamically

primeng

angular