Просмотр не обновляется, когда функция касания изменяет переменную, используемую в условии ngIf

Я пытаюсь показать другую часть моего шаблона в зависимости от того, какую кнопку нажимает пользователь.

Я не уверен, что это тот случай, когда мне нужно сообщить Angular, что следует запустить обнаружение изменений? (Я новичок в Angular 2, поэтому пытаюсь понять эту концепцию)

Шаблон:

    <Button (tap)="showTab(0)" text="Show Tab 0"></Button>
    <Button (tap)="showTab(1)" text="Show Tab 1"></Button>
    <StackLayout *ngIf="currentTab == 0">
        <Label text="Tab 0"></Label>
    </StackLayout>
    <StackLayout *ngIf="currentTab == 1">
        <Label text="Tab 1" class="user-name"></Label>
    </StackLayout>

Составная часть:

export class MyComponent {
  currentTab: number = 0;
  ...
  showTab = (num: number) => {
    this.currentTab = num;
  }
  ...
}

Поведение:

  • Правильная вкладка (0) отображается при начальной загрузке и исчезает, когда я нажимаю «Показать вкладку 1», но вкладка 1 не отображается.
  • Нажатие назад на «Показать вкладку 0» ничего не делает.

Спасибо за вашу помощь!


nativescript typescript angular angular2-nativescript
person Ryan27    schedule 17.12.2016    source источник
comment
Вы проверили значение currentTab, применив console.log(this.currentTab); в тебе showTab?? вы получаете какую-либо ошибку?   -  person Amit kumar    schedule 17.12.2016
comment
Amit: да, я могу вывести в консоль значение this.currentTab, и оно установлено правильно. Ошибок в консоли нет.   -  person Ryan27    schedule 17.12.2016
comment
Я протестировал ваш код, и у меня не было проблем с эмулятором iOS. Я бы проверил, какие версии вы используете, так как они могут быть устаревшими. Также какую платформу вы использовали, и это было на реальном устройстве или на эмуляторе?   -  person Richard Hubley    schedule 20.06.2017

Ответы (2)


arrow_upward
0
arrow_downward

Ваш код кажется мне правильным. но не могли бы вы попробовать сделать свой currentTab: boolean=false;

и код как

    <Button (tap)="showTab(false)" text="Show Tab 0"></Button>
    <Button (tap)="showTab(true)" text="Show Tab 1"></Button>
    <StackLayout *ngIf="!currentTab">
        <Label text="Tab 0"></Label>
    </StackLayout>
    <StackLayout *ngIf="currentTab">
        <Label text="Tab 1" class="user-name"></Label>
    </StackLayout>

а также

export class MyComponent {
  currentTab: boolean = false;
  ...
  showTab(num: boolean){
    this.currentTab = num;
  }
  ...
}

также попробуйте таким образом showTab(num: number){ } вместо showTab = (num: number) => {} ; и проверьте свои типы.

person Amit kumar    schedule 17.12.2016
comment
Я пробовал это, с тем же результатом. Я правильно вижу логическое значение в консоли, но представление не обновляется. Может быть, это связано с использованием ngIf в тегах макета NativeScript? - person Ryan27; 17.12.2016
comment
это нормально работает в angular. я ежедневно использую такие вещи. Я еще не пробовал NativeScript. но если это связано с обнаружением изменений, вам следует попробовать ngZone. Иногда, когда я использую интеграцию метеора и angular 2, я сталкиваюсь с такими проблемами. попробуй нгзон. проверьте мой этот ответ приложение meteor angular 2 появляется только после щелчка в браузере "> stackoverflow.com/questions/41145290/ надеюсь, что это поможет вам. - person Amit kumar; 17.12.2016

arrow_upward
0
arrow_downward

Вы пытались использовать [hidden] вместо *ngIf?

person Mete Cantimur    schedule 17.12.2016