回调函数更改不影响 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 标签值，但标签没有得到更新。

编辑：

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

Answer 1

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

Answer 2

您是否尝试过以下方法？

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

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

Answer 3

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

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

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