PrimeNg Chips按回车提交时额外生成空白chip的问题排查

出现回车提交后同时生成空白chip、正常内容chip共2个条目，是因为重复触发了数组添加逻辑：

• p-chips组件本身在你按回车提交输入时，会自动将输入的字符串插入到[(ngModel)]绑定的nome数组中
• 你额外监听了onAdd事件，在回调中又手动向nome数组push了一次自定义pessoa对象，等于单次提交执行了两次插入
• 组件自动插入的是纯字符串值，不存在nome属性，模板渲染{{item.nome}}时就会显示为空白条目；你手动插入的是带nome属性的pessoa实例，可以正常显示输入内容，最终就出现了异常效果。
  另外你在ngOnInit生命周期里预先向数组push了一个初始化的pessoa对象，会导致页面加载后默认就带一个chip，不需要默认chip的话可以删掉这段逻辑。

调整onAdd回调逻辑，先移除组件自动插入的字符串条目，再插入自定义的pessoa实例即可，修复后的代码如下：

组件类代码 #

export class AppComponent {
  title = 'imoveis';
  nome: Array<pessoa> = new Array<pessoa>();
  basic: string = "d";
  
  ngOnInit(){
    // 不需要默认初始化chip的话可以删除注释内的代码
    // let p:pessoa = new pessoa();
    // this.nome.push(p);
  }

  adicionar(event:any):void{
    // 移除组件自动插入的字符串条目
    this.nome.pop();
    // 插入自定义类型实例
    let p:pessoa = new pessoa();
    p.nome = event.value;
    this.nome.push(p);
  }
}

class pessoa{
   nome:string = "diego"; 
}

模板代码 #

<p-chips (onAdd)="adicionar($event)" [disabled]="false" [max]="2"  [(ngModel)]="nome">
    <ng-template let-item pTemplate="item" >
        {{ item.nome }}
    </ng-template>
</p-chips>

调整后按回车提交只会生成一个带输入内容的chip，不会再出现空白冗余条目。

内容的提问来源于stack exchange，提问作者Diego Alves