javascript - 尝试设置 3 个不同的 ngIf 以不同的点击次数打开

Question

好吧，我想做的是，当用户单击开始计时器按钮时，它会打开输入，以便您可以设置计时器，并且开始计时器按钮消失，然后当用户单击输入时，输入框将关闭，取消计时器按钮将在计时器完成或用户单击取消时显示，并且启动计时器按钮重新出现此代码位于 ngFor 循环内。

toggleTimer: any;
toggleTimerActive: any;
toggleTimerCancel: any;

      <div *ngFor="let time of times; let i = index" attr.data="{{time.Direction}}">
        <div class="card">
          <div class="card-body" style="text-align: left;">
            <div class="row">
              <strong><span class="col-sm">Due in: {{time.Duein}} mins</span></strong>
              <span class="col-sm">Direction {{time.Direction}}</span>
              <span class="col-sm">Destination: {{time.Destination}}</span>
            </div>
            <div class="row">
              <span class="col-sm">Expected Arrival {{time.Exparrival}}</span>
              <span class="col-sm">Train type {{time.Traintype}}</span>
            </div>
            <div class="row">
              <span class="col-sm">Last Location: {{time.Lastlocation}}</span>
            </div>
            <hr />
            /* this is where I am trying to make it happen*/
            <i *ngIf="toggleTimer !== i" (click)="toggleTimer === i ? toggleTimer = null : toggleTimer = i; toggleTimerActive !== i ? toggleTimerActive = null : toggleTimerActive !== i; toggleTimerInput !== i ? toggleTimerInput = null : toggleTimerInput = true;"
              class="far fa-clock"> Set timer</i>
              <div class="timer" *ngIf="toggleTimerActive === i">
                  <i class="far fa-clock" (click)="endsTimer()"> Stop Timer</i>
                  {{remaining | time}}
              </div>
            <div class="md-form" *ngIf="toggleTimerInput === i">
              <input mdbInput type="tel" [(ngModel)]="settime" (keydown.enter)="startTimer(time.Duein); toggleTimer = i; toggleTimerInput = false;"
                class="form-control" placeholder="Set timer (In minutes)" />
            </div>
          </div>
        </div>
      </div>

当我点击开始计时器按钮时，它消失了，但输入不显示

Answer 1

似乎这个条件总是失败 toggleTimerInput !== i ? toggleTimerInput = null : toggleTimerInput = true;最初，toggleTimerInput 未定义且不等于 0(假设在第一次迭代时将 0 分配给 i)，因此会分配 null，并且 null 永远不等于 i，因此它始终为 null。