无法显示输入值

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;
 }

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

Answer 1

您可以尝试这样的事情 离子输入标签中的＃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>

Answer 2

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

arenaTotal: number = 1000;
emptySeats: number;

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

constructor() {}

Answer 3

使用（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;
}

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