Question

在这里，我试图在同一页面上按“购买”按钮显示3个不同的视图，但是在这里，如果按第二个视图，并且在获取第三个视图时，我也无法继续进行操作

下面是我的代码：

<div class="container">


    <div *ngIf="showData">
         <p>This is page 1</p>
        <button class="btn btn-primary" (click)="testOne()">Page 1
         </button>
           <br>
           <br>
         <button (click)="page3()" >click here for page 3</button>
    </div>
    <hr/>
    <div *ngIf="!showData">
        <p> this is page 2</p>
        <button class="btn btn-primary" (click)="back()">Back to page1</button>
    </div>

    <div *ngIf="!showData">
       <p>Page 3</p>
    </div>  

</div>  

 showData = true;


  testOne(){
    this.showData = false;
  }

  back(){
    this.showData = true;
  }

  page3(){
    this.showData = false;
  }

stackblitz网址：https://stackblitz.com/edit/angular-vyw1cs

Answer 1

您必须执行以下操作：

链接在这里：https://stackblitz.com/edit/angular-wphb4k

Answer 2

一种方法是将*ngIf设置为评估它是否在页码上，然后采取相应措施：

html

<div class="container">
    <div *ngIf="showData == 1">
         <p>This is page 1</p>
        <button class="btn btn-primary" (click)="showData = 2">Page 2
         </button>
         <button (click)="showData = 3" >page 3</button>
    </div>
    <hr/>
    <div *ngIf="showData == 2">
        <p> this is page 2</p>
        <button class="btn btn-primary" (click)="showData = 1">Page 1
         </button>
         <button (click)="showData = 3" >page 3</button>
    </div>

    <div *ngIf="showData == 3">
       <p>Page 3</p>
        <button class="btn btn-primary" (click)="showData = 1">Page 1
         </button>
         <button (click)="showData = 2" >page 2</button>
    </div>  

</div>

component.ts

showData = 1

stackblitz示例

https://stackblitz.com/edit/angular-9scudq

在使用angular 2+在同一页面中显示各种视图时面临问题

2 个答案: