如何在 Angular 4 中设置从视图选择器发送的值类型？

Question

在我看来，我有一个简单的数字选择器代码：

<ion-select #pageSelector  [(ngModel)]="viewCurrentPageNumber" interface="popover" (ionChange)="newPageSelected($event)">
   <ion-option *ngFor="let number of renderTasks; let i = index" value="{{i+1}}">{{i+1}}</ion-option> 
</ion-select>

它只是显示一个带有 1,2,3,4...renderTasks.length 的选择器，并将选择的值发送到 newPageSelected()

newPageSelected(pageNum : number) {
    console.log("newPageSelected()");

    console.log(`pageNum : ${pageNum} as  ${typeof pageNum}`);
    console.log("this.status.currentPageNum: " + this.status.currentPageNum + " as " + typeof this.status.currentPageNum);

    if(this.status.currentPageNum === pageNum) {
        console.log("pageNum is the same as the actual, nothing will be rendered.")
    } else {
        console.warn("loading")
        this.loadPage(pageNum);
    }
}

问题是 if 总是错误的，因为控制台记录：

pageNum : 2 as  string 
this.status.currentPageNum: 1 as number

很明显 === 失败了。有没有办法设置为选择器发送的值的类型，这样我就不必在函数中重新检查它（即 pageNum = Number(pageNum) ）或使 if 比较不那么严格（ == ）

Answer 1

一开始我不确定，因为几个月前有一些与此相关的问题，但是如果你想将 ion-select 绑定到数字属性，而不是使用 value="{{i+1}}"（因为它是插值，会产生一个字符串）你需要像这样使用属性绑定：[value]="i+1"

这样，每个离子选项的值将绑定到对象（在这种情况下是一个数字）并且不会被转换为字符串。

<ion-select #pageSelector  [(ngModel)]="viewCurrentPageNumber" interface="popover" (ionChange)="newPageSelected($event)">
   <ion-option *ngFor="let number of renderTasks; let i = index" [value]="i+1">{{i+1}}</ion-option> 
</ion-select>

如何在 Angular 4 中设置从视图选择器发送的值类型？

How to set type of value send from a View selector in Angular 4?

typescript

ionic2

angular2-template

ionic3