无法显示输入值

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

您只在构造函数中进行了一次数学运算，您可能希望将其设为属性。这样模板可以保持不变，但只要arenaTotal或emptySeats发生变化，该值就会更新。arenaTotal: number = 1000;emptySeats: number;get arenaCurrent() {&nbsp; &nbsp; return this.arenaTotal - this.emptySeats;}constructor() {}

Answer 2

使用 (ionChange) 显示结果。<div class="empty">&nbsp; &nbsp; &nbsp;<h5> Input Empty Total </h5>&nbsp; &nbsp; &nbsp; <ion-item>&nbsp; &nbsp; &nbsp; <ion-input (ionChange)="change()" placeholder="Enter Empties.." type="number" name="emptySeats"[(ngModel)]="emptySeats"> </ion-input>&nbsp; &nbsp; &nbsp; &nbsp; </ion-item>&nbsp; &nbsp; </div>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <p> {{arenaCurrent}} </p>在 javascript 中调用函数更改。arenaTotal: number = 1000;emptySeats: number;arenaCurrent: number;constructor() {}change(){&nbsp; &nbsp; this.arenaCurrent = this.arenaTotal - this.emptySeats;}当用户在 ion-input 中输入值时，上述内容将立即更新结果。

Answer 3

你可以 在你的 ion-input 标签中尝试这样的 #emptySeats="ngModel"<div class="empty"><h5> Input Empty Total </h5>&nbsp; &nbsp; <ion-item>&nbsp; &nbsp; &nbsp; &nbsp; <ion-input placeholder="Enter Empties.." type="number" name="emptySeats" [(ngModel)]="emptySeats" #emptySeats="ngModel"> </ion-input>&nbsp; &nbsp; </ion-item></div><p> {{arenaCurrent}} </p>