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

编辑：添加对象后我点击了p-chips模板，并且对象被反映出来了，但是如何自动完成而无需单击？

Answer 1

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

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

灌注p芯片：无法动态添加对象

1 个答案: