0

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

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

<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”并在芯片组件中可见。

4

1 回答 1

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" }];
于 2019-06-14T10:56:15.950 回答