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

好的，我想做的是，当用户单击启动计时器按钮时，它会打开输入，因此您可以设置计时器，启动计时器按钮会消失，然后在用户单击输入时，输入框将关闭，取消计时器按钮将显示当计时器结束或用户单击“取消”并且重新出现“启动计时器”按钮时，此代码在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>

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

最佳答案

似乎这种情况总是失败的。toggleTimerInput !== i ? toggleTimerInput = null : toggleTimerInput = true;最初，toggleTimerInput是未定义的并且不等于0（假设在第一次迭代中将0分配给i），因此null被分配且null永远不等于i，因此它将始终为null。