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没有考虑改变（不刷新标签）。所以，做一个函数

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

然后，

{{1}}

Answer 2

您是否尝试过以下方法？

$ aql
Aerospike Query Client
Version 3.15.1.2
C Client Version 4.3.0
Copyright 2012-2017 Aerospike. All rights reserved.
aql> register module './test.lua'
OK, 1 module added.
aql> insert into test.demo (PK,i,s,m,l) values ('88',6,'six',MAP('{"a":2, "b":4, "c":8, "d":16}'),LIST('[2, 4, 8, 16, 32, 128, 256]'))
OK, 1 record affected.

aql> select * from test.demo where PK='88'
+---+-------+--------------------------------------+-------------------------------------+
| i | s     | m                                    | l                                   |
+---+-------+--------------------------------------+-------------------------------------+
| 6 | "six" | MAP('{"a":2, "b":4, "c":8, "d":16}') | LIST('[2, 4, 8, 16, 32, 128, 256]') |
+---+-------+--------------------------------------+-------------------------------------+
1 row in set (0.001 secs)

aql> execute test.list_compare("l", LIST('[1,2,3,4]')) on test.demo where PK='88'
+----------------+
| list_compare   |
+----------------+
| LIST('[2, 4]') |
+----------------+
1 row in set (0.002 secs)

aql> execute test.list_compare("l", LIST('[1,2,3,4]'),1) on test.demo where PK='88'
+-------------------------------+
| list_compare                  |
+-------------------------------+
| LIST('[8, 16, 32, 128, 256]') |
+-------------------------------+
1 row in set (0.001 secs)

aql> execute test.list_compare("m", LIST('[1,2,3,4]')) on test.demo where PK='88'
+----------------+
| list_compare   |
+----------------+
| LIST('[2, 4]') |
+----------------+
1 row in set (0.001 secs)

aql> execute test.list_compare("m", LIST('[1,2,3,4]'), 1) on test.demo where PK='88'
+-----------------+
| list_compare    |
+-----------------+
| LIST('[8, 16]') |
+-----------------+
1 row in set (0.000 secs)

我无法回想起标签上是否存在可以绑定的文本属性，但当然可以使用字符串插值将文本输出到视图中。

Answer 3

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

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

这将强制一个摘要周期，让你的UI注意到这一变化。

回调函数更改不会影响UI

3 个答案: