按键中的多个函数，调用第二个函数直到第一个函数完成答案

【问题标题】：multiple function in keypress, call the second function until the first function is finished按键中的多个函数，调用第二个函数直到第一个函数完成
【发布时间】：2021-05-30 15:29:38
【问题描述】：

所以我有一个输入名字age，另一个输入名字ageDif，ageDif是只读的并且依赖于年龄，所以50-age = ageDif。

html文件

<div>
  <label>Age</label>
  <input required name="age" id="age" (keypress)="justnumeric($event); calculateAgeDif()" [(ngModel)]="age"/>
</div>
  <label>Age Difference</label>
  <input name="age difference"  [(ngModel)]="ageDif"/>
</div>

ts。文件

 justnumeric(event): boolean {    
      let pattern = /^([0-9])$/;
      let result = pattern.test(event.key);
      return result;
  }

  calculateAgeDif(){
    this.ageDif = 50- this.age;
  }

问题是它只输入第一个数字。所以如果我输入 22 作为年龄，ageDif 将是 48 和 28。

【问题讨论】：

首先，尝试使用这个正则表达式而不是/^([0-9])[2]/...
你使用了按键事件，所以很明显年龄首先需要 2，然后是 22，给出 ageDif 48 和 28
如果您希望它只更改一次，请使用更改事件而不是按键

标签： javascript angular typescript angular8 keypress

【解决方案1】：

由于您希望在验证来自justnumeric(event) 的输入检查后计算ageDif，因此您需要更改事件处理以使用(change) 计算ageDif，如下所示：

<input required name="age" id="age" (keypress)="justnumeric($event);" (change)="calculateAgeDif()" [(ngModel)]="age"/>

这里(change) 不会触发，直到输入值没有改变，(keypress) 事件将只允许你已经在做的数值。

【讨论】：

【解决方案2】：

我通常使用具有这种功能的响应式表单来获取在输入上使用其可观察 API。

age.component.ts

@Component({
  selector: 'app-age',
  templateUrl: './age.component.html',
  styleUrls: ['./age.component.scss']
})
export class AgeComponent implements OnInit {

  age: FormGroup;

  constructor(private builder: FormBuilder) {
     this.age = builder.group({
       age: ['', [Validators.required, Validators.pattern(/^([0-9])[2]/)]]
     });
  }

  calculateAgeDif(): Observable<number> {
    return this.age.controls['age'].valueChanges
      .pipe(
        map((value) => 50 - value)
      );
      // so you are now watching the form here and calculating the age dif at once
  }
}

age.component.html

<div [formGroup]="age">
  <label>Age</label>
  <input name="age" id="age" formControlName="age"/>
</div>
  <label>Age Difference</label>
  <input name="age difference"  [value]="calculateAgeDif() | async"/>
</div>

【讨论】：

【解决方案3】：

试试这个：

// Call only justNumeric here and call the ageDiff function in this justNumeric method.
<input required name="age" id="age" (keypress)="justnumeric($event)" [(ngModel)]="age"/>

// In component.ts file, 
 justnumeric(event): boolean {    
      let pattern = /^([0-9])$/;
      let result = pattern.test(event.key);
      this.calculateAgeDif(); // This is the preferred way of angular method calling
      return result;
  }

  calculateAgeDif(){
    this.ageDif = 50- this.age;
  }

【讨论】：