无法显示输入值

Question

尝试接受用户输入并打印计算值

// HTML

<div class="empty">
<h5> Input Empty Total </h5>
    <ion-item>
        <ion-input placeholder="Enter Empties.." type="number" name="emptySeats" [(ngModel)]="emptySeats"> </ion-input>
    </ion-item>
</div>

<p> {{arenaCurrent}} </p>

// JS

arenaTotal: number = 1000;
emptySeats: number;
arenaCurrent: number;

constructor() {
    this.arenaCurrent = this.arenaTotal - this.emptySeats;
 }

arenaCurrent将打印1000-emptySeats（用户输入）

Answer 1

使用（ionChange）显示结果。

<div class="empty">
     <h5> Input Empty Total </h5>
      <ion-item>
      <ion-input (ionChange)="change()" placeholder="Enter Empties.." type="number" name="emptySeats"[(ngModel)]="emptySeats"> </ion-input>
        </ion-item>
    </div>    
    <p> {{arenaCurrent}} </p>

在javascript中调用函数更改。

arenaTotal: number = 1000;
emptySeats: number;
arenaCurrent: number;
constructor() {}
change(){
    this.arenaCurrent = this.arenaTotal - this.emptySeats;
}

当用户在离子输入中输入值时，以上内容将立即更新结果。

Answer 2

您只需在构造函数中执行一次数学运算，就可能希望将其设为属性。 这样，模板可以保持不变，但是只要arenaTotal或emptySeats更改，值就会更新。

arenaTotal: number = 1000;
emptySeats: number;

get arenaCurrent() {
    return this.arenaTotal - this.emptySeats;
}

constructor() {}

Answer 3

您可以在ion-input标签中尝试类似＃emptySeats =“ ngModel”的方法

<div class="empty">
<h5> Input Empty Total </h5>
    <ion-item>
        <ion-input placeholder="Enter Empties.." type="number" name="emptySeats" [(ngModel)]="emptySeats" #emptySeats="ngModel"> </ion-input>
    </ion-item>
</div>

<p> {{arenaCurrent}} </p>