如何成功实施 ngIf 条件

Question

我正在尝试在我的离子应用程序中成功实施一些 ngIf 逻辑。我目前已经获得了您可以在下图中看到的当前流程。用户输入项目标题，然后出现下一个选项，然后可以 select 他们想要上传什么类型的媒体。我已将 NgIf 条件实施到此流程中。但是，当我想让用户可以选择返回并重命名标题时。我无法理解逻辑。

当用户点击后退按钮时，我发现很难让应用回到之前的状态，那里有标题的输入框。我只能找回下一个按钮。

下面是我试过的代码，

HTML

 <ion-item *ngIf = "nextOptions == next" no-padding style ="text-align: center;" id="projectTitle" color="transparent">
          <ion-input [(ngModel)]="title" class="text-input" placeholder="Project Title"></ion-input>
          </ion-item>
            <div style="text-align: center !important;" >
            <ion-button   *ngIf ="!title"  style="margin-top: 40%" color ="transparent">maybe later</ion-button>
            <ion-button  (click)="nextOption()" *ngIf = "title && !nextOptions"   style="margin-top: 40%"color ="transparent">next</ion-button>
          </div>

TS

nextOption() {
  this.nextOptions = "next"
}

backtoTitle() { 
  this.nextOptions = '';
}

有人能帮忙吗，我好像想不通

Answer 1

你可以试试这个：

<ng-container *ngIf = "nextOptions == 'previous'">
 <ion-item no-padding style ="text-align: center;" id="projectTitle" color="transparent">
       <ion-input [(ngModel)]="title" class="text-input" placeholder="Project Title"></ion-input>
          </ion-item>
            <div style="text-align: center !important;" >
            <ion-button   *ngIf ="!title"  style="margin-top: 40%" color ="transparent">maybe later</ion-button>
            <ion-button  (click)="nextOption()" *ngIf = "title && !nextOptions"   style="margin-top: 40%"color ="transparent">next</ion-button>
          </div>

</ng-container>

小心你忘记了你的 *ngIf.'next' 中的 ''（不像你 next）。

编辑：是你做的：

nextOption() {
  this.nextOptions = "next"
}

backtoTitle() { 
  this.nextOptions = "previous";
}

现在以这种方式更正代码：

 <ng-container *ngIf = "nextOptions == 'previous'">

你的问题很容易解决，你取一个变量，当用户点击你时显示 html。

如何成功实施 ngIf 条件

How can I successfully implement ngIf conditions

typescript

ionic-framework

angular

ionic4