Javascript 如何在angular 9中依次显示多个截面

我有3个部分/部门，我想展示一个接一个。例如，一旦我单击“显示进度”按钮，首先“first”div应该只显示，几秒钟后“second”div应该显示隐藏“first”one，然后在几秒钟后“first”和“second”div应该隐藏，第三个应该显示。它第一次工作正常，但当我再次单击时，它不工作。有没有更好的办法。这是密码

app.component.html 你忘了

this.third = false;

在第一次设置超时时

顺便说一句，我喜欢使用rxjs/运算符，所以您可以编写

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和这个“tecnica”来改进我的答案。如果你有

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>

第一组
第二组
第三组

我的建议：不要使用多个布尔变量（第一、第二、第三），只使用一个变量，如“status”

导出类AppComponent{
状态：“无”|“第一”|“第二”|“第三”=“无”；
showdivs（）{
this.status='first'；
设置超时（（）=>{
this.status='second'；
}, 4000);
设置超时（（）=>{
this.status='third'；
}, 8000);
}
}

在html中：

First div
第二组
第三组

这种结构避免了像意外同时显示“第一”和“第二”这样的情况。此外，它更具可伸缩性：只需使用一个变量，就可以创建数百个步骤

要使其更安全，可以使用如下枚举：

导出类AppComponent{
状态：状态=状态。无；
//这用于使枚举在模板中可用。
只读状态_ENUM=状态；
showdivs（）{
this.status=status.First；
设置超时（（）=>{
this.status=status.Second；
}, 4000);
设置超时（（）=>{
this.status=status.Third；
}, 8000);
}
}
枚举状态{
没有一个
第一，
第二
第三
}

First div
第二组
第三组

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

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

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

另外，不要使用一个

*ngIf*ngIf*ngIf*ngIf

，而是使用一个

*ngSwitch

。诸如此类：

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

---

工作完成。

我的想法是只使用一个变量。但是为什么停在这里？还有很多事情要做。停止使用人名（一，二，三，四…）如果有一百七十六张幻灯片怎么办？？你能一一列举吗？只用数字1，2，3，4。巨大的简化，你可以做

slide++

和

slide--

。然后，不要使用

*ngIf*ngIf*ngIf*ngIf

，而是使用一个

*ngSwitch

。使用

*ngSwitch

的想法肯定会使代码的结构更加完善-我喜欢这样！关于数字：这在很大程度上取决于您的用例。使用枚举的最大缺点是，如果在某个时间点要在幻灯片的“中间”插入内容，则必须更新其后的所有

*ngSwitchCase

字段。因此，甚至引入映射

（幻灯片编号）（枚举条目）

也是有意义的。但我想我们把事情搞得太复杂了：我也把它作为参考

<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>

<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