Angular 带输入的角度2分页控件-验证

我有一个分页组件

html: 第一页

---

控制台日志中正确分配了该值，但输入文本框仍显示无效输入。我怎样才能解决这个问题

你在正确的轨道上，只要做几件事就能达到目的。基本上，您希望在更改当前页面索引时随时跟踪lastPageIndex，然后在检查失败时将当前页面索引设置为lastPageIndex中的值。如果他们离开，也可以将输入更改为ngModel并为textfield添加一个on blur事件来捕获他们的更改。如果您的用户可能试图将输入更改为其他无效内容，您可以添加针对这些内容的检查，甚至可以使用ngOnChanges（）监视输入以确保正确。更新后的goToPage函数示例如下所示

 goToPage(page: number) {
    // check to make sure number is valid
    if(this.pageIndex <= 1 || this.pageIndex >= this.pages.length || isNaN(this.pageIndex)) {
      alert("invalid page selected");
      this.pageIndex = this.lastPageIndex;
    }
    else {
      // update current page and save last index
      this.pageIndex = page;
      this.lastPageIndex = this.pageIndex;
    }
  }

goToPage（页码）{
//检查以确保号码有效
if（this.pageIndex=this.pages.length | | isNaN（this.pageIndex））{
警报（“选择的页面无效”）；
this.pageIndex=this.lastPageIndex；
}
否则{
//更新当前页面并保存最后一个索引
this.pageIndex=page；
this.lastPageIndex=this.pageIndex；
}
}

---

下面是一个简化的plunker，其中有一个问题的工作示例

您有哪些ChangeDetectionStrategy？也许你跑出了angular？不知道你所说的ChangeDetectionStrategy是什么意思。每次输入为有效数字时，我都设置this.previousPageIndex=this.pageIndex；我保存以前的有效输入，以便在输入无效输入时再次使用它。为了进一步澄清，我在输入控件和组件之间使用了一个简单的变量绑定，如typescript中的pageIndex:number，然后将其绑定到输入控件的值。如果每次更改pageIndex时都保存previousPageIndex，然后在验证失败时，按照您编写的那样设置pageIndex=previousPageIndex，那么您的方法就会起作用。例如，请参阅下面我的答案。您的plunker示例与我需要的完全相同。当我尝试执行同样的操作时，我得到以下错误：未处理的承诺拒绝：模板解析错误：无法绑定到“ngModel”，因为它不是“input”的已知属性。（“][（ngModel）]=“pageIndex”>/{{totalPages}}我想出来了。我必须导入FormsModule，这很有效。非常感谢！

checkPageIndex() {
    this.validpageIndex = true;    

    if (this.pageIndex < 1 || this.pageIndex > this.totalPages || isNaN(this.pageIndex)) {
        this.validpageIndex = false;
        this.toaster.showToaster('Please select a page between 1 and ' + this.totalPages + '.');
        return;
    }
}

this.pageIndex = this.previousPageIndex;

 goToPage(page: number) {
    // check to make sure number is valid
    if(this.pageIndex <= 1 || this.pageIndex >= this.pages.length || isNaN(this.pageIndex)) {
      alert("invalid page selected");
      this.pageIndex = this.lastPageIndex;
    }
    else {
      // update current page and save last index
      this.pageIndex = page;
      this.lastPageIndex = this.pageIndex;
    }
  }