0

Estoy usando angular 7 y tengo un componente en el que defino un array y se lo paso a otro componente por su selector

<app-personas-Lista
  *ngIf="show == true"
  [miArray]="personas-Lista"
></app-personaR>

Cuando pasa determinado evento, ese array cambia sus valores y quiero recargar ese componente hijo para que muestres los nuevos valores, cómo puedo hacerlo?

Agrego detalle del código, acción que modifica el array en el componente padre:

export class ReportComponent implements OnInit {
  name: FormControl;
  show: boolean;
 personas-Lista: Historic[];
  
  constructor(private service: Reportservice) {
    this.name = new FormControl('', []);
    this.show = true;
    this.personas-Lista= [];
  }

  ngOnInit(): void {}
 actionSearch() {
    this.show = false;
    this.service
  .getHistoryByUsername(this.name.value)
  .subscribe((history) => {
    this.personas-Lista.splice(0,this.personas-Lista.length);
    personas-Lista.forEach(h => this.personas-Lista.push(h));
  });
   this.show = true;
  }

Luego en el componente hijo:

@Input() miArray: Historic[];
  dataSource: MatTableDataSource<Historic>;
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  displayedColumns: string[] = [
    'ID',
    'Asignado a',
  ];
  constructor() {
  }
  ngOnInit() {
  this.dataSource = new MatTableDataSource(this.miArray);
  }
  ngOnChanges(){
    this.ngOnInit();
  }
  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }
  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }
}
2
  • Hola, puedes compartir mas a detalle tu código, para conocer el motivo del por que no te esta actualizando, teóricamente angular debería de actualizar automáticamente el componente debido a que es un data-binding. Commented el 21 sept. 2020 a las 23:05
  • Listo @OscarLudick
    – ale
    Commented el 21 sept. 2020 a las 23:13

2 respuestas 2

0

Debes implementar el ngOnChanges de forma correcta. Además, llamar a ngOnInit dentro del scope de otro hook no es muy buena práctica, ya que es parte del core de Angular y está destinado a ser manipulado por el mismísimo Angular... puedes tener errores inesperados en tu aplicación.

Prueba esto en el componente hijo:

ngOnChanges(changes: SimpleChanges): void {
  changes.miArray && this.miArray = changes.miArray;
}
0

El problema consiste en que el evento ngOnChanges no se esta mandando llamar, esto se debe a que tu arreglo personas-Lista esta apuntando siempre a la misma referencia incluso si lo modificas (agregar, eliminar, etc). Dado a que la referencia siempre apunta al mismo arreglo necesitas crear uno nuevo, tienes muchas opciones, lo mas simple sería que reasignes una copia de tu arreglo ya construido:

this.personas-Lista = [...this.personas-Lista];

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.