回调函数变化不影响UI

Question

Angular 5.2.0 和 TypeScript 2.6.2.

我正在使用 following plugin 读取 NFC 标签。当用户按下按钮时监听器启动。

<button (tap)="doStartNdefListener()" text="Get NFC"></button>
<Label [text]="nfcText" textWrap="true"></Label>

问题 - 即使 doStartNdefListener() 中的回调成功扫描标签，将输出保存在 nfcText，从回调中输出值，即使 nfcText 的值已更改，它也不会更新 UI.

import { Component } from "@angular/core";
import { Nfc, NfcTagData, NfcNdefData } from "nativescript-nfc";

export class StartComponent { 
public nfc: Nfc;
public nfcText: string;

constructor(){
    this.nfc = new Nfc();
}

public doStartNdefListener() {
    this.nfc.setOnNdefDiscoveredListener((data: NfcNdefData) => {
        if (data.message) {
            let tagMessages = [];
                data.message.forEach(record => { 
                    tagMessages.push(record.payloadAsString); });

                console.log(tagMessages.join(", "));
                this.nfcText = tagMessages.join(", ");
                console.log(this.nfcText);
            }
        },
        { stopAfterFirstRead: true, scanHint: "Scan the tag!" })
        .then(() => this.nfcText = "Listening for tag")
        .catch(err => alert(err));
    }
}

两个控制台输出打印出扫描的 NFC 标签值，但标签没有更新。

编辑：

有趣的是 UI 在我运行 doStartNdefListener() 函数后执行另一个函数后更新。

Answer 1

尝试将其包装到 $timeout 块中。

$timeout(()=> {
     this.nfcText = tagMessages.join(", ");
}, 100);

这将强制执行摘要循环，让您的 UI 注意到更改。

Answer 2

你试过下面的方法了吗？

<Label> {{nfcText}} </Label>

我不记得标签上是否存在可以绑定的文本属性，但可以肯定的是，您可以使用字符串插值将文本输出到视图。

Answer 3

@rgantla，问题是 Angular 不考虑更改（不刷新标签）。所以，做一个函数

private changeNfcText (message:string) {
            this.ngZone.run(()=>{
              this.nfcText = message;
             });
        }
    }

然后，

this.nfc.setOnNdefDiscoveredListener((data: NfcNdefData) => {
        if (data.message) {
            let tagMessages = [];
                data.message.forEach(record => { 
                    tagMessages.push(record.payloadAsString); });

                console.log(tagMessages.join(", "));
                this.changeNfcText(tagMessages.join(", ")); //<--call the function
                console.log(this.nfcText);
            }
        },
        { stopAfterFirstRead: true, scanHint: "Scan the tag!" })
        .then(() => this.changeNfcText("Listening for tag")) //<--call the function
        .catch(err => alert(err));
    }

回调函数变化不影响UI

Callback function changes do not affect UI

typescript

nativescript

angular2-nativescript

angular