Как сделать так, чтобы Ngx материализовал фишки двойного связывания - PullRequest
Новая
       26

Как сделать так, чтобы Ngx материализовал фишки двойного связывания

0 голосов
/ 14 июня 2019

Я пытаюсь создать пользовательский компонент в 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» чип«Привет мир» должен быть добавлен и видим в компоненте фишек.

1 Ответ

1 голос
/ 14 июня 2019

Я не знаю, является ли это проблемой в текущем случае, но вы указали [(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" }];
...