Question

我试图根据用户点击的按钮显示模板的不同部分。

我不确定这是否需要通知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”无效。

感谢您的帮助！

Answer 1

您的代码对我来说似乎是正确的。但是你可以尝试制作你的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）=＆gt; {};并检查你的类型。

Answer 2

您是否尝试使用 [隐藏] 而不是 * ngIf ？

当敲击功能更改ngIf条件中使用的变量时，查看不更新

2 个答案: