Data does not refresh/update when a new value is added

[abolinhas]

Hi
My app is does not refresh/update labels or other king of input when a new value is added, this is a very weird issue because seams that the function to add the values is working properly but the view does not refresh with the new values, I only can see the new values just when I click on back button. You can see the bug on this video.
https://youtu.be/Dv3jRiusUqo

TNS version is 3.3.1

My code:
view.html

<ActionBar class="action-bar" >
        <Label class="action-bar-title title" [text]="hostname"></Label>
        <NavigationButton text="{{ 'msg_btn_close' | translate }}" icon="res://ic_chevron_left_white_24dp" (tap)="goBack()"></NavigationButton>
</ActionBar>
<TabView #proxyTabView>
        <StackLayout *tabItem="{iconSource: 'res://ic_dashboard_black_24dp'}">
                <GridLayout columns="*,*,*,*" rows="auto, 180, 180">
                        <GridLayout colSpan="4" columns="*" row="0">
                                <RadDataForm tkExampleTitle tkToggleNavButton #proxyServerForm [source]="proxyData">
                                        <TKEntityProperty tkDataFormProperty name="hostname" displayName="{{ 'msg_ip_hostname' | translate }}" index="1">
                                                <TKPropertyEditor tkEntityPropertyEditor>
                                                        <TKPropertyEditorStyle tkPropertyEditorStyle labelHidden="false" labelTextSize="15"ios:labelFontName="Questrial" android:labelFontName="Questrial-Regular" labelPosition="Top"></TKPropertyEditorStyle>
                                                </TKPropertyEditor>
                                                <TKNonEmptyValidator tkEntityPropertyValidators errorMessage="{{ 'msg_error_ip_empty' | translate }}" ></TKNonEmptyValidator>
                                        </TKEntityProperty>
                                </RadDataForm>
                        </GridLayout>
                </GridLayout>
        </StackLayout>
        <StackLayout *tabItem="{iconSource: 'res://ic_http_black_24dp'}">
                <Label text="This is Label in Tab 2"></Label>
        </StackLayout>
        <StackLayout *tabItem="{iconSource: 'res://ic_memory_black_24dp'}">
                <Label text="This is Label in Tab 2"></Label>
        </StackLayout> 
        <StackLayout *tabItem="{iconSource: 'res://ic_network_check_black_24dp'}">
                <Label text="This is Label in Tab 2"></Label>
        </StackLayout>        
</TabView>

view.ts

import { Component, OnInit, OnDestroy, NgZone } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ObservableArray } from "tns-core-modules/data/observable-array";
import { TranslateService } from "ng2-translate";
import { Server } from "../../model/server.model";
import { DatabaseService } from "../../services/database.service";
import { RouterExtensions } from "nativescript-angular/router";
import { LoadingIndicator } from 'nativescript-loading-indicator';
import { ProxyData } from "../../model/proxy-data.model"
@Component({
	selector: 'proxy-server',
	templateUrl: './components/proxy-server/proxy-server.component.html',
	styleUrls: ['./components/proxy-server/proxy-server.component.css']
})

export class ProxyServerComponent implements OnInit {

	public server: Server;
	public worker;
	private _token: string;
	private hostname: string;
	public test: string;
	private indicator: LoadingIndicator;
	private _proxyData: ProxyData;
	
	
	constructor(private zone: NgZone, private route: ActivatedRoute, private databaseService: DatabaseService, private nav: RouterExtensions, private translate: TranslateService) { 
		this.indicator = new LoadingIndicator();
		this.route.params.subscribe((params) => {
			this.server = {id:params["id"]};
			
		});
		this.worker = new Worker('../../workers/server-worker');
		this.databaseService.fetchByID(this.server).then((res: any) => {
			this._token=res[0].token
			this.worker.postMessage({server:res[0].hostname,port:res[0].port, username:res[0].username, pwd:res[0].pwd, token:res[0].token, action:"start"});
		})
			
	}
	
	ngOnInit() {
		this.hostname ="Loading data"
		this.worker.onmessage = (msg) =>{
			if (msg.data!=="error"){
				this._proxyData = new ProxyData(msg.data.os.hostname);
				this.hostname=msg.data.os.hostname
				console.log(msg.data.os.hostname);
			}
		}
		this.worker.onerror = (e) =>{
			console.log(e.message);
		}
	}
	get proxyData(): ProxyData {
		return this._proxyData;
	}
	private goBack() {
		this.indicator.show({ message: 'Please Wait...' });
		this.worker.postMessage({token:this._token, action:"stop"});
		setTimeout(() => {
			this.worker.terminate();
			this.indicator.hide();
			this.nav.navigate(['/home'], { clearHistory: true });
		}, 5000);
	}
}

Best regards

[m-abs]

It's not really a bug, I'm guessing it's the proxyData property that isn't updated.

The value is updated outside of angular (in the onmessage callback), so the value change isn't detected.
Try wrapping it inside your NgZone like this:

	ngOnInit() {
		this.hostname ="Loading data"
		this.worker.onmessage = (msg) =>{
                        this.zone.run(() => {
			if (msg.data!=="error"){
				this._proxyData = new ProxyData(msg.data.os.hostname);
				this.hostname=msg.data.os.hostname
				console.log(msg.data.os.hostname);
			}
                        });
		}
		this.worker.onerror = (e) =>{
			console.log(e.message);
		}
	}

[abolinhas]

Hi @m-abs
You are absolutely right, NgZone fix the issue.
Many thanks.
The issue can be closed.
Best Regards

[amendez1000]

@m-abs ,

I really apprecited this helped. Because it worked for me too. However, I didn't understand completely, why this happened in my scenario. Hopefuly, you can could me. I would appreciate if I am able to understand this concepts.

This is in like.component.ts

ngOnInit(): void {
    this.likesCount = 0;

    this.isLoading = true;
    this.saving = false;
    this.likesCounter();

    SignalRWebsiteHubHelper.initSignalR();

    abp.event.on('refreshAnswer', (answerId, userId) => {
      if (this.answerId == answerId && (abp.session.userId == undefined || abp.session.userId != userId)) {
        this.likesCounter();
      }
    });
  }

likesCounter() {
    this._ngZone.run(() => {
      this._questionService.getVotesQtyForAnswer(this.answerId).subscribe(resultVotes => {
        this.likesCount = resultVotes[0].quantity;
        this.isActive = resultVotes[0].isActive;
        this.isLoading = false;
      });
    });
  }

My code didn't have the _ngZone.run code and the likesCount value was not refreshed on the page. According to your explanation, I think the reason is because abp.event.on event was triggered by JavaScript code. I am using SignalR to notify when a user clicked a like button and I wanted that all other user were notified that there is a new like for the question.

Thanks so much anyway.

[m-abs]

Hi @amendez1000,

It works because the refreshAnswer-event is triggered from out side of angular and NgZone.run(...)` triggers angular's change detection once it is done. Without it angular can't know the values have changed and won't update the UI.

https://angular.io/guide/zone#ngzone-1

I would recommend you move the _ngZone.run(..) into the subscribe-callback, like this:

  likesCounter() {
    this._questionService.getVotesQtyForAnswer(this.answerId).subscribe(resultVotes => {
      this._ngZone.run(() => {
        this.likesCount = resultVotes[0].quantity;
        this.isActive = resultVotes[0].isActive;
        this.isLoading = false;
      });
    });
  }

Just in-case getVotesQtyForAnswer(...) is async and subscribe is triggered after run(...) has finished. Even if it is always sync, I'd still make it a habit to put the run(...) inside subecribe for when you need it for something that is async and save you some debugging time.

[amendez1000]

@m-abs,

Thanks so much for your time and advices.