3

Estoy usando Angular 7 y quiero que cuando cambio el nombre de la persona que busco, la tabla actualice la información, pero no está funcionando:

En el componente principal tengo esto:

<div fxLayaout= "row">
  <div fxLayout="row" fxLayoutAlign="start center" fxFlex="50"     fxLayoutGap="5px">
  </div>
<div fxLayout="row"  fxFlex fxLayoutAlign="end center">
  <employee-autocomplete
    [control]="name"
  ></employee-autocomplete>
  <button mat-mini-fab aria-label="Buscar historial de empleado" (click)="actionSearch()">
    <mat-icon>search</mat-icon>
  </button>
</div>
</div>
<app-employee-historic-list
  *ngIf="show == true"
  [arrayHistory]="historic"
></app-employee-historic-list>

actionSearch lo que hace es:

actionSearch() {
    this.show = false;
    this.service
  .getHistoryByUsername(this.name.value)
  .pipe(take(1))
  .subscribe((history) => {
     this.historic = history;
   });
   this.show = true;

Luego en la lista component, en el ts tengo esto:

export class EmployeeHistoricListComponent implements OnInit, AfterViewInit {
  @Input() arrayHistory: Historic[];
  dataSource: MatTableDataSource<Historic>;
  @ViewChild(MatTable) table : MatTable 
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  displayedColumns: string[] = [
    'ID',
    'Asignado a',
    'Tipo',
    'Marca',
    'Oficina',
    'Fecha de asignación',
    'Realizado por'
  ];
  constructor() {
  }
  ngOnInit() {
  console.log(this.arrayHistory)
  this.dataSource = new MatTableDataSource(this.arrayHistory);
  }
  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();
  }
}

Entonces, cuando en el componente padre busco un empleado, lo que quiero lograr es que se reinicié o recargue el componente hijo con la data. Por qué no funciona así?

1 respuesta 1

1

El problema está en la función actionSearch(), en esta línea this.historic = history;. El componente hijo está enlazado con el arreglo al que hace referencia la variable historic y ese arreglo es el que debe modificarse para que los datos se actualicen en el hijo.

En lugar de: this.historic = history; se debe hacer lo siguiente:

.subscribe((history) => {
     // una forma de limpiar el arreglo historic
     this.historic.splice(0,this.historic.length);

     //this.historic = history; 

     // insertar los nuevos en elementos en el arreglo this.historic
     // usando el mismo arreglo al que hace referencia el elemento hijo
     history.forEach(h => this.historic.push(h));
   });

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.