I'm facing a challenge in updating the view of an Angular Component whenever there are changes in the data. I explored the ChangeDetectionStrategy.OnPush and hoped it would resolve the issue, but unfortunately, it didn't work out as expected.
The component in question is 'upcoming-studies', which is nested within the 'studies' component.
upcoming-studies.component.html
<div>
<ngx-datatable
#upcoming
class="material"
[headerHeight]="50"
[footerHeight]="50"
[rowHeight]="'auto'"
[rows]="rows"
[columns]="columns"
[columnMode]="'flex'"
[selected]="selected"
[selectCheck]="selectUnselect"
[selectionType]="'single'"
[limit]="10"
(select)='onSelect($event)'>
</ngx-datatable>
</div>
The [rows]="rows" attribute fetches data from the backend using an HTTP call. The goal is to update the view whenever the 'rows' variable is updated or when an HTTP call is made.
upcoming-studies.component.ts
@Component({
selector: 'rmis-upcomingstudies',
templateUrl: './upcoming-studies.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
styleUrls: ['./upcoming-studies.component.css']
})
export class UpcomingStudiesComponent implements OnInit, OnChanges {
// ToDo: Check specific data types
@Input() rows = [];
@Input() temp = [];
constructor(private studiesService: StudiesService,
private exceptionService: ExceptionService,
private cd: ChangeDetectorRef) {
this.columns = [
{prop: 'protocol_number', name: 'Protocol Number', flexGrow: 1},
{prop: 'start_date', name: 'Start Date', flexGrow: 1},
{prop: 'end_date', name: 'End Date', flexGrow: 1},
{prop: 'patient_count', name: 'Patient Count', flexGrow: 1},
{prop: 'trial_country', name: 'Country', flexGrow: 1},
];
}
ngOnInit() {
this.getUpcomingStudies();
}
ngOnChanges() {
//Need to implement logic for detecting changes in 'rows' and 'temp' variables
}
Despite utilizing ChangeDetectionStrategy, the number of rows displayed on the UI does not change even after receiving updated data from an external HTTP call. Any suggestions on how to make this functionality work properly?
Update 1: It seems that the @Input() variables are not being updated, preventing proper change detection. Is there an alternative solution?
Update 2: Changes have been made in updating the 'rows' and 'temp' variables. The upcoming-studies component receives these values as inputs from the studies component, which retrieves them via an HTTP call.
studies.component.html
<upcoming-studies [rows] = rows [temp] = temp>
</upcoming-studies>
An HTTP call is made by the studies component to populate the 'rows' and 'temp' arrays with data.
studies.component.ts
public rows = [];
public temp = [];
ngOnInit() {
this.getUpcomingStudies();
}
getUpcomingStudies() {
this.studiesService
.getUpComingStudies()
.subscribe(
(data) => {
this.temp = data['records'];
this.rows = this.studiesService.util_to_cal_time(data['records']);
},
(err: HttpErrorResponse) => {
this.exceptionService.errorResponse(err);
},
() => {
}
);
}
Initially, the 'getUpcomingStudies' method is called within the studies component's ngOnInit(). Subsequently, it can be triggered from another component. Further details can be provided if necessary.
util_to_cal_time - Utility function to modify time formats within the array.
util_to_cal_time(studies: Array<any>) {
for (const each of studies) {
const sDate = new Date(each.start_date * 1000);
each.start_date = sDate.getUTCMonth() + 1 + '/' + sDate.getUTCDate() + '/' + sDate.getFullYear();
const eDate = new Date(each.end_date * 1000);
each.end_date = eDate.getUTCMonth() + 1 + '/' + eDate.getUTCDate() + '/' + eDate.getFullYear();
}
return studies;
}