在Nativescript中随机出现错误初始化组件

时间:2019-03-29 17:33:07

标签: angular nativescript angular-components nativescript-angular

登录过程完成后,使用导航(RouterExtensions)加载一个简单的组件页面。该组件仅显示来自数组的随机短语。

有时(并非总是如此),只有大约20%的时间,该组件发生故障,并出现一个不确定的属性短语错误。在模拟器和设备中都会失败。

这是组件的代码:

HTML

<StackLayout class="stack-layout-1" horizontalAlignment="center" verticalAlignment="center" backgroundColor="#292731">
<GridLayout rows="*, auto, auto, auto">
    <Image row="0" src="~/images/bulb.png" class="slide-image"></Image>
    <Label row="1" [text]="phrase.phrase" class="h4 m-x-20 primary-text" textWrap="true"></Label>
    <Label row="2" [text]="phrase.author" class="text-right m-r-30 secondary-text"></Label>
    <Button row="3" text="Continuar" (tap)="onTapContinue()"  class="btn btn-primary btn-rounded-sm" height="50"></Button>
</GridLayout>

TS

import { Component, OnInit } from '@angular/core';

import { RouterExtensions } from 'nativescript-angular/router';
import { Page } from 'tns-core-modules/ui/page';

import { Phrase } from '../../models/phrase.model';
import { HelpersService } from './../../services/helpers.service';
import { ConfigService } from './../../services/config.service';

@Component({
  selector: 'ns-phrases',
  templateUrl: './phrases.component.html',
  styleUrls: ['./phrases.component.css'],
  moduleId: module.id,
})
export class PhrasesComponent implements OnInit {

  public phrase: Phrase = new Phrase();

  constructor(private routerExtensions: RouterExtensions,
              private page: Page,
              private configService: ConfigService,
              private helpersService: HelpersService) { }

  ngOnInit() {
    this.page.actionBarHidden = true;

    // Get random phrase
    this.phrase = this.configService.PHRASES[this.helpersService.getRandomNumber(1, 6)];
  }

  public async onTapContinue() {
    await this.routerExtensions.navigate(['/home'], {
      clearHistory: true,
      transition: {
        name: 'slideTop',
        duration: 350,
        curve: 'ease'
      }
    });
  }
}

短语类

export class Phrase {
  phraseId: number;
  phrase: string;
  author: string;

  constructor() {
    this.phraseId = 0;
    this.phrase = 'Vaya, esto es un poco embarazoso... No he podido cargar la frase del día.';
    this.author = 'Tu App móvil';
  }
}

该短语用一些默认值初始化。 错误是:

错误TypeError:无法读取未定义的属性“短语”

关于为什么有时会发生这种情况的任何想法? 问候 何塞

0 个答案:

没有答案