Question

我正在尝试用angular + ngx-materialize创建一个自定义组件，该组件封装使用芯片组件的人的标签逻辑。因此，我需要在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

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

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

尝试删除第一个。

更新

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

尝试更改此行

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

与此：

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

如何使Ngx实现芯片双重绑定

1 个答案: