如何设置从 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绑定到 number 属性，而不是使用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>