Question

我正在尝试创建一个简单的多步骤表单（步骤1、2、3）。我正在使用* ngIf隐藏和显示步骤。这是我尝试过的。

这是我的component.html

<div *ngIf="step1" class="step1">
<h1>STEP 1<h1>
</div>

<div *ngIf="step2" class="step2">
<h1>STEP 2<h1>
</div>

<div *ngIf="step3" class="step3">
<h1>STEP 3<h1>
</div>
<div class="button-container">
<button class="float-left" (click)="stepBackward()" >Back</button>
<button class="float-right" (click)="stepForward()">Next</button>
</div>

这是我的组件。

import { Component, Inject, OnInit, Renderer2 } from '@angular/core';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Title } from '@angular/platform-browser';
import { Router } from '@angular/router';
import { Observable } from 'rxjs';
@Component({
  selector: 'app-step-builder',
  templateUrl: './step-builder.component.html',
  styleUrls: ['./step-builder.component.scss']
})
export class StepBuilderComponent implements OnInit {

 constructor(private pageTitle: Title,
    private router: Router,
    private fb: FormBuilder,
    private http: HttpClient,
    @Inject(ENV_TOKEN) private ENV: any,
    private renderer: Renderer2,
    private snackBarService: SnackbarService){}
    stepCounter = 0;
    step1 = true; step2 = false; step3 = false;
    stepArray = new Array();

   stepForward() {

    this.stepArray[this.stepCounter] = false;       
    console.log(this.stepCounter);
    this.stepCounter++;
    
    this.stepArray[this.stepCounter] = true;
    console.log(this.stepCounter);
  }

  stepBackward() {
    console.log(this.stepCounter);
    this.stepArray[this.stepCounter] = false;
   
    this.stepCounter--;
    console.log(this.stepCounter);
  }

}

所以基本上我想做的是，我有一个stepCounter，它的开头是0，当我单击Forward时，计数器递增，同时还尝试隐藏当前容器（步骤1）通过将this.step1设置为false，我使用了一个数组来存储step1，step2和step3，并使用stepCounter作为索引，我试图将当前步骤的值设置为false。但是，这不会隐藏div，step1的值为false，但是div没有隐藏。整个方法听起来很愚蠢。有没有更好，更简单的方法来实现功能？

Answer 1

您永远不会更改step-n布尔值。我在这里推荐了一种切换案例的方法。

var js = (IJavaScriptExecutor) driver;
var myValue = js.ExecuteScript("return document.getElementById('amount').value");

这里您只需要stepIndex（从1开始）。不需要stepN或stepArray。

Answer 2

您的模板使用了错误的数据绑定。它应该像：

<div *ngIf="stepArray[0]" class="step1">
<h1>STEP 1<h1>
</div>

<div *ngIf="stepArray[1]" class="step2">
<h1>STEP 2<h1>
</div>

<div *ngIf="stepArray[2]" class="step3">
<h1>STEP 3<h1>
</div>

在模型中，您应该定义一个数组

export class StepBuilderComponent implements OnInit {

    stepCounter = 0;
    stepArray = [true, false, false];

   stepForward() {
    this.stepArray[this.stepCounter] = false;       
    this.stepCounter++;
    if(this.stepCounter > this.stepArray.length - 1) {
       this.stepCounter = this.stepArray.length - 1;
    }
    
    this.stepArray[this.stepCounter] = true;
  }

  stepBackward() {
    this.stepArray[this.stepCounter] = false;
    this.stepCounter--;
    if(this.stepCounter < 0) {
       this.stepCounter = 0;
    }
    this.stepArray[this.stepCounter] = true;
  }

}

Angular 9多步骤表单/表单向导

2 个答案: