时间戳

首页 > 解决方案 > 当我开始在输入区域输入值时，函数立即触发

html - 当我开始在输入区域输入值时，函数立即触发

问题描述

我正在尝试根据输入的值计算总持续时间。但是当我开始输入时，它会触发 calculateTotal 函数。并给我这个错误：

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'null: 273'. Current value: 'null: 294'.

为什么这个函数会随机触发和更改值？点击按钮后不应该触发吗？

app.component.html

<div>
  <label>Duration</label>
  <input [(ngModel)]="durationModel.Duration" type="text" name="Duration" value="" #inputValue />
  <button (click)="addDuration()">Submit</button>
  <div [hidden]="durationList.length === 0">
    <ul>
      <li *ngFor="let duration of durationList">
        {{calculateDuration(duration)}}
      </li>
    </ul>
    <div>Total Duration : {{calculateTotal(21)}}</div>
  </div>
</div>

app.component.ts

export class DurationModel {
  Duration: number;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  durationModel: DurationModel = new DurationModel();
  durationList = [];
  totalDuration = 0;

  addDuration() {
    this.durationList.push(this.durationModel.Duration);
    this.durationModel = new DurationModel();
  }

  calculateDuration(duration) {
    if (duration > 60) {
      const hours = Math.floor(duration / 60);
      const minutes = Math.floor(duration % 60);
      return `${hours} hours ${minutes} min.`;
    }
    return `${duration} min.`;
  }

  calculateTotal = (duration) => {
    console.log(duration);
    return this.totalDuration += duration;
  }
}

Stackblitz 演示

标签： htmlangulartypescript

解决方案

这样做的原因是因为您的 htmlcalculateTotal(...)在页面加载时调用该方法。进行以下更改：

.ts

export class AppComponent  {

   calTotal;

   ...

  calculateTotal = (duration) => {
    console.log(duration);
    this.calTotal = this.totalDuration += duration;
  }


}

.html

<div>Total Duration : {{ calTotal }}</div>

因此，在单击按钮时，将存储适当的值，calTotal并且可以相应地在模板中检索它。

编辑：您总结用户输入时间的方法是复杂的 IMO。您可以将其简化为：

.ts

export class AppComponent {

  durationList = [];
  totalDuration = 0;
  displayTotal: string;

  addDuration(time: number) {
    this.durationList.push(time);
    this.totalDuration = this.totalDuration + Number(time);
    this.displayTotal = this.calculateDuration(this.totalDuration);
  }

  calculateDuration(duration) {
    if (duration > 60) {
      const hours = Math.floor(duration / 60);
      const minutes = Math.floor(duration % 60);
      return `${hours} hours ${minutes} min.`;
    }
    return `${duration} min.`;
  }
}

.html

<div>
    <label>Duration</label>

    <input type="number" #inputValue />

    <button (click)="addDuration(inputValue.value)">Submit</button>

    <div [hidden]="durationList.length === 0">
        <ul>
            <li *ngFor="let duration of durationList">
                {{calculateDuration(duration)}}
            </li>
        </ul>
        <div>Total Duration : {{displayTotal}}</div>
    </div>

</div>

Stackblitz 演示

推荐阅读