无法显示输入值

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>//jsarenaTotal: number = 1000;emptySeats: number;arenaCurrent: number;constructor() {    this.arenaCurrent = this.arenaTotal - this.emptySeats; }arenaCurrent 将打印 1000 - emptySeats（用户输入）

Answer 1

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

arenaTotal: number = 1000;

emptySeats: number;

get arenaCurrent() {

    return this.arenaTotal - this.emptySeats;

}

constructor() {}

Answer 2

使用 (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;

}

当用户在 ion-input 中输入值时，上述内容将立即更新结果。

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>