如何使 Ngx 物化芯片双重绑定

Question

我正在尝试在 angular + ngx-materialize 中创建一个自定义组件，它为使用 chips 组件的人封装标签逻辑。所以我需要在 Person 组件和我的标签组件之间提供双重绑定。

我已经创建了组件，并且能够监听标签组件的更改，以便此人获得新值。然而，当人的值发生变化时，标签不会更新。

<app-input-conocimientos [(conocimientosSeleccionados)]="conocimientosSeleccionados"></app-input-conocimientos>
<button (click)="actualizarConocimientos()">Actualizar</button>
<button (click)="verConocimientos()">Ver</button>

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-prueba',
  templateUrl: './prueba.component.html',
  styleUrls: ['./prueba.component.css']
})
export class PruebaComponent implements OnInit {

  constructor() { }

  private conocimientosSeleccionados: any[] = [];

  ngOnInit() {
  }

  actualizarConocimientos() {
    this.conocimientosSeleccionados.push({ tag: "Hello world" });
  }

  verConocimientos() {
    console.log(this.conocimientosSeleccionados);
  }

}

<mz-chip-input [placeholder]="'Conocimientos...'" [secondaryPlaceholder]="'+Conocimiento'" [(ngModel)]="chips"
  [autocompleteOptions]="posiblesConocimientos" [(ngModel)]="conocimientosSeleccionados" (add)="onAdd($event)"
  (delete)="onDelete($event)">
</mz-chip-input>

import { Component, OnInit, Input, ChangeDetectorRef, Output, EventEmitter } from '@angular/core';
import { ConocimientosService } from '../conocimientos.service';

@Component({
  selector: 'app-input-conocimientos',
  templateUrl: './input-conocimientos.component.html',
  styleUrls: ['./input-conocimientos.component.css']
})
export class InputConocimientosComponent implements OnInit {

  @Input() conocimientosSeleccionados: Materialize.ChipDataObject[];
  @Output() conocimientosSeleccionadosChange = new EventEmitter();

  posiblesConocimientos: Materialize.AutoCompleteOptions;

  constructor(private cdr: ChangeDetectorRef) { }

  onAdd() {
    this.avisarDeCambios();
  }

  onDelete() {
    this.avisarDeCambios();
  }

  avisarDeCambios() {
    this.conocimientosSeleccionadosChange.emit(this.conocimientosSeleccionados);
  }

}

应该发生的是，当按下按钮 "Actualizar" 时，芯片 "Hello world" 应该被添加并在芯片组件中可见。

Answer 1

我不知道在当前情况下这是否是一个问题，但您在 <mz-chip-input> 组件上指定了两次 [(ngModel)]：

[(ngModel)]="chips"
and...
[(ngModel)]="conocimientosSeleccionados"

尝试删除第一个。

更新

我检查了 ngx-materialize 库，据说每次更改它都需要重新创建一个数组（因为他们使用 OnPush 更改检测策略）。

尝试更改此行

this.conocimientosSeleccionados.push({ tag: "Hello world" });

有了这个：

this.conocimientosSeleccionados = [...this.conocimientosSeleccionados, { tag: "Hello world" }];

如何使 Ngx 物化芯片双重绑定

How to make Ngx materialize chips double binding

angular-material

angular

ngx-chips