如何在角度9中一个接一个地显示多个部分

Question

我有 3 个部分/div，我想一个接一个地显示。例如，一旦我单击“显示进度”按钮，首先“第一个”div 应该只显示，几秒钟后“第二个”div 应该显示隐藏“第一个”一个，然后在几秒钟后“第一个”和“第二个”div 应该隐藏第三个应该显示。它第一次工作正常，但是当我再次单击时它不起作用。有没有更好的方法我可以做到。这是代码https://stackblitz.com/edit/angular-atf7ja?file=src%2Fapp%2Fapp.component.html

app.component.html

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>
<button (click)="showdivs()">show progress</button>

<div *ngIf="first">First div</div>
<div *ngIf="second">Second div</div>
<div *ngIf="third">Third div</div> 

app.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  first: boolean = false;
  second: boolean = false;
  third: boolean = false;
  name = 'Angular';
  ngOnInit() {}
  showdivs() {
    this.first = true;
    setTimeout(() => {
      this.first = false;
      this.second = true;
    }, 4000);

    setTimeout(() => {
      this.first = false;
      this.second = false;
      this.third = true;
    }, 8000);
  }
}

Answer 1

我的建议：不要使用多个布尔变量（第一、第二、第三），而只需使用一个变量，例如“状态”。

export class AppComponent {
   status: 'none' | 'first' | 'second' | 'third' = 'none';

   showdivs() {
    this.status = 'first';
    setTimeout(() => {
      this.status = 'second';
    }, 4000);

    setTimeout(() => {
      this.status = 'third';
    }, 8000);
  }
}

在您的 html 中：

<div *ngIf="status === 'first'">First div</div>
<div *ngIf="status === 'second'">Second div</div>
<div *ngIf="status === 'third'">Third div</div>

这种结构避免了意外同时显示“first”和“second”的情况。此外，它更具可扩展性：您只需使用一个变量即可创建数百个步骤。

为了使这种类型更加安全，您可以像这样使用枚举：

export class AppComponent {
  status: Status = Status.None;

  // This is used to make the enum available in the template.
  readonly STATUS_ENUM = Status;  

   showdivs() {
    this.status = Status.First;
    setTimeout(() => {
      this.status = Status.Second;
    }, 4000);

    setTimeout(() => {
      this.status = Status.Third;
    }, 8000);
  }
}

enum Status {
  None,
  First,
  Second,
  Third
}

<div *ngIf="status === STATUS_ENUM.First">First div</div>
<div *ngIf="status === STATUS_ENUM.Second">Second div</div>
<div *ngIf="status === STATUS_ENUM.Third">Third div</div>

Answer 2

就像@MBuchalik 一样，我认为显然您必须为所有变量使用一个变量，而不是每张幻灯片使用一个变量。您不能只用人类语言一张一张地列举所有幻灯片。

想象一下有一百七十六张幻灯片；你会写一百七十六次相同的指令集，在每一张中你一张一张地列举所有一百七十六张幻灯片，隐藏或显示你想要的吗？那是三万九百七十六行代码:)

不，解决方案是 1) 对所有变量使用一个变量，2) 使用数字，而不是英文数字。

另外，请使用*ngSwitch，而不是*ngIf *ngIf *ngIf *ngIf。类似的东西：

<div [ngSwitch]="slideNumber">
    <div *ngSwitchCase="1">First div</div>
    <div *ngSwitchCase="2">Second div</div>
    <div *ngSwitchCase="3">Third div</div> 
</div>

组件：

public slideNumber:number = 1;

slideNumber++; // Next slide
slideNumber--; // Previous slide
slideNumber = 8; // Jump to one particular slide

工作完成。

Answer 3

你忘了

this.third = false;

在第一次setTimeout中

顺便说一句，我喜欢使用timerrxjs/operators，所以你可以写

import {timer} from 'rxjs'
import {take} from 'rxjs/operators'

  showDivs(){
    timer(0,4000).pipe(
      take(3)).subscribe(res=>{
        this.first=res==0
        this.second=res==1
        this.third=res==2
      })
  }

更新另一种方法，因为所有用户都说你可以有一个变量，并且只有当变量等于 0、1 或 2 时才显示。所以我使用 pipeasync 和这个“技术”改进了我的答案”。如果你有

showDivs(){
  this.timer$=timer(0,400).pipe(
   take(3))
}

你可以拥有

<ng-container *ngIf="{data:timer$|async} as tm">
  <div *ngIf="tm.data==0">First div</div>
  <div *ngIf="tm.data==1">Second div</div>
  <div *ngIf="tm.data==2">Third div</div>
</ng-container>