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í?