Наблюдаемый в HTML не обновляется - PullRequest
Новая
       25

Наблюдаемый в HTML не обновляется

0 голосов
/ 09 апреля 2019

Я работаю над приложением с возможностями NFC. Я терплю неудачу в самом начале. Чтобы продемонстрировать и протестировать Nfc-теги, я хочу иметь кнопку, которая запускает Ndef Listener. При обнаружении тега метка должна измениться с «Listening ...» на «Read: TagMessage». Это отображается только при нажатии другой клавиши.

Я использую демо-приложение, которое поставляется с плагином nativescript-nfc, но вместо страницы XML мне нужны страницы HTML. Я искал в Интернете целый день и не смог найти никакого рабочего решения.

HTML-код: 

<StackLayout>
    <Button text="Available?" (tap)="this.doCheckAvailable()"></Button>
    <Button text="Enabled?" (tap)="this.doCheckEnabled()"></Button>   
    <Button text="Start listening" (tap)="this.doStartNdefListener()"></Button>
    <Button text="Stop listening" (tap)="this.doStopNdefListener()"></Button>   
    <Label text="{{this.lastNdefDiscovered}}" textWrap="true"></Label>
</StackLayout>

TS-код: 

export class NFCReaderComponent extends observable.Observable { 
  public lastNdefDiscovered: string = "Press a button...";
  private nfc: Nfc;

  constructor(
    private route: ActivatedRoute,
        private router: RouterExtensions,
  ) {
    super();
    this.nfc = new Nfc();
  }

  public ngOnInit() {
    application.android.on(
      application.AndroidApplication.activityBackPressedEvent,
      (args:any) => {args.cancel = true;
      this.router.navigate(['/home'], {
        transition: {
          name: 'slideTop'
        },
        clearHistory: true
      })}
    );
  }

  public doCheckAvailable() {
    this.nfc.available().then((avail) => {
      console.log("Available? " + avail);
      alert("" + avail);
    }, (err) => {
      alert(err);
    });
  }

  public doCheckEnabled() {
    this.nfc.enabled().then((on) => {
      console.log("Enabled? " + on);
      alert("" + on);
    }, (err) => {
      alert(err);
    });
  }

  public doStartNdefListener() {
    this.lastNdefDiscovered= "";
    this.nfc.setOnNdefDiscoveredListener((data: NfcNdefData) => {
      if (data.message) {
        let tagMessages = [];
        // data.message is an array of records, so:
        data.message.forEach(record => {
          console.log("Read record: " + JSON.stringify(record));
          tagMessages.push(record.payloadAsString);
        });
        this.set("lastNdefDiscovered", "Read: " + tagMessages.join(", "));
      }
    }, {
      stopAfterFirstRead: true,
      scanHint: "Scan a tag, baby!"
    }).then(
      ()=>this.set("lastNdefDiscovered","Listening...")
    ).catch(err => alert(err));
  }

  public doStopNdefListener() {
    this.nfc.setOnNdefDiscoveredListener(null).then(() => {
      this.set("lastNdefDiscovered", "Stopped listening.");
    }, (err) => {
      alert(err);
    });
  }

Для xml код работал без нареканий, может кто-нибудь подсказать, как это сделать для html?

Редактировать (с NgZone): 

public doStartNdefListener() {
    this.lastNdefDiscovered= "Listening...";
    this._ngZone.runOutsideAngular(()=> {
      this.nfc.setOnNdefDiscoveredListener((data: NfcNdefData) => {
        if (data.message) {
          let tagMessages = [];
          // data.message is an array of records, so:
          data.message.forEach(record => {
            console.log("Read record: " + JSON.stringify(record));
            tagMessages.push(record.payloadAsString);
          }); 
          this.set("lastNdefDiscovered", "Read: " + tagMessages.join(", "));
          this._ngZone.run(()=>console.log("lastNdef updated..."));
        } 
      })
    })
  }

С этими изменениями все работает нормально.

1 Ответ

0 голосов
/ 09 апреля 2019

Избавьтесь от this в HTML.Область действия html-файла означает, что вам не нужно использовать ключевое слово this, просто обратитесь к переменной напрямую: 

<StackLayout>
    <Button text="Available?" (tap)="doCheckAvailable()"></Button>
    <Button text="Enabled?" (tap)="doCheckEnabled()"></Button>   
    <Button text="Start listening" (tap)="doStartNdefListener()"></Button>
    <Button text="Stop listening" (tap)="doStopNdefListener()"></Button>   
    <Label text="{{lastNdefDiscovered}}" textWrap="true"></Label>
</StackLayout>
...