I am getting a very weird error in Ionic 4 where my view doesn’t update automatically when the data changes. But when I click on the html then it updates.
The issue with the error is very inconsistent and hard to replicate. But it now has happened twice to me when migrating my components.
A bit of background I have a component that displays the role hierarchy of an organisation. Below is what the data object looks like. It is a nested objects.
let obj1: OrganisationRoleChart = {
id: "59f4d75d-5dd3-401c-a313-572efb266aec",
organisation: {id: "e36d1d62-c7ab-498d-8fc9-c674b7eb6b23", name: "ABCCOMPANY", organisation_type: {id: 10, name: "SUPPLIER"}, default_folder: null},
role: {id: 2, name: "CEO", description: "Head of finance", is_protected: false},
description: null,
children: [{id: "c1688286-2eeb-4c32-901e-f00788b31b5d",
organisation: {id: "e36d1d62-c7ab-498d-8fc9-c674b7eb6b23", name: "ABCCOMPANY",
organisation_type: {id: 10, name: "SUPPLIER"}, default_folder: null},
role: {id: 3, name: "Accountant", description: "Account dept", is_protected: false},
description: null,
children: []}]
}
When I make a change like removing a role, it performs the action and the calls an API which is part of shared service to retrieve the updated role chart as below.
/*
** name: Set Record
** desc:
*/
setRecord(): void {
this.isLoad = true;
this.presentLoading('Fetching...');
console.log('Fetching role chart...');
this.roleResourceService.getOrganisationRolesChartsHttp(this.id)
.subscribe(
data => {
console.log('Role charts fetched!', data);
if (data.length > 0) {
this.record = data[0];
} else {
this.record = null;
}
this.dismissLoading();
this.isLoad = false;
},
err => {
this.events.publish('alert:server-error', err);
this.dismissLoading();
this.isLoad = false;
},
() => console.log('Request Complete')
);
}
<div *ngIf="record && !isLoad">
<app-zoom *ngIf="record.children.length>0" [value]="zoom" (onUpdate)="zoom = $event" [isPrint]="true"></app-zoom>
<div id="printArea" [style.height.px]="500" scrollX="true" scrollY="true" style="position:relative">
<div fxFlex fxLayout="horizontal" [style.zoom.%]="zoom">
<div fxFlex></div>
<div style="position: relative;text-align: center">
<ion-card class="card" style="display:inline-block;" padding>
<div fxFlex fxLayout="horizontal">
<div fxFlex fxLayout="vertical">
<div>{{record.role.name}}</div>
<div>{{record.description?record.description:record.role.description}}</div>
</div>
<div>
<ion-button (click)="presentActionSheet(record)" fill="clear" >
<ion-icon name="more"></ion-icon>
</ion-button>
</div>
</div>
</ion-card>
<!--Vertical Line-->
<hr class="hr" *ngIf="record.children.length>0">
<app-chart-node [isLarge]="isLarge" [mode]="'role'" [records]="record.children" (onChild)="child($event)" (onDelete)="delete($event)"></app-chart-node>
</div>
<div fxFlex></div>
</div>
</div>
</div>
The issue is when the new data is retrieved the view doesn’t update with the new hierarchy. But the weird thing is when I click on the component area in the html view it then updates with the latest changes.
I did some further testing and made a simple button which manually changes the record. This works and the view updates as expected.
test(): void {
let obj1: OrganisationRoleChart = {
id: "59f4d75d-5dd3-401c-a313-572efb266aec",
organisation: {id: "e36d1d62-c7ab-498d-8fc9-c674b7eb6b23", name: "ABCCOMPANY", organisation_type: {id: 10, name: "SUPPLIER"}, default_folder: null},
role: {id: 2, name: "CEO", description: "Head of finance", is_protected: false},
description: null,
children: [{id: "c1688286-2eeb-4c32-901e-f00788b31b5d",
organisation: {id: "e36d1d62-c7ab-498d-8fc9-c674b7eb6b23", name: "ABCCOMPANY", organisation_type: {id: 10, name: "SUPPLIER"}, default_folder: null},
role: {id: 3, name: "Accountant", description: "Account dept", is_protected: false},
description: null,
children: []}]
}
this.record = obj1;
}
Finally here is my ionic info:
Ionic:
ionic (Ionic CLI) : 4.2.0 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.0.0-beta.12
@angular-devkit/core : 0.9.0-beta.3
@angular-devkit/schematics : 0.9.0-beta.3
@angular/cli : 6.1.5
@ionic/ng-toolkit : 1.1.0
@ionic/schematics-angular : 1.0.7
Cordova:
cordova (Cordova CLI) : 7.1.0
Cordova Platforms : none
Cordova Plugins : no whitelisted plugins (5 plugins total)
System:
ios-deploy : 1.9.1
NodeJS : v10.10.0 (/usr/local/bin/node)
npm : 6.4.1
OS : macOS High Sierra
So I am absolutely lost why is this happening, is as if the view component is loosing focus when it is does the API call. Has anyone else run into a similar issue? Appreciate any help on this.
