Question

当添加新值时，我的应用程序不刷新/更新标签或其他输入王，这是一个非常奇怪的问题，因为接收添加值的函数正常工作但视图不刷新新值，我只能在单击后退按钮时看到新值。您可以在此视频中看到错误。 https://youtu.be/Dv3jRiusUqo

TNS版本是3.3.1

我的代码： 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);
    }
}

祝你好运

Answer 1

通过在ngOnInit中使用NgZone修复了问题。

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);
        }
    }

Nativescript - 添加新值时，数据不会刷新/更新

1 个答案: