Ionic 5变量变量插值不起作用

Question

我试图在 ionic 5 中渲染一个组件变量，但它没有在视图中渲染。视图呈现完美，但当我尝试使用变量插值时，硬编码内容也消失了。

import { Component, Input, OnInit } from "@angular/core";
import { Router } from "@angular/router";

@Component({
  selector: "app-item-detail",
  templateUrl: "./item-detail.page.html",
  styleUrls: ["./item-detail.page.scss"]
})
export class ItemDetailPage implements OnInit {
  itemCount: number;

  constructor(
    private route: Router,
  ) {}

  ngOnInit() {
    this.itemCount = 1;
  }

  increaseItemCount() {
    if (this.itemCount >= 10) {
      this.itemCount = 10;
    } else {
      this.itemCount++;
    }
    console.log(this.itemCount);
  }
  decreaseItemCount() {
    if (this.itemCount <= 1) {
      this.itemCount = 1;
    } else {
      this.itemCount--;
    }
    console.log(this.itemCount);
  }

}

这是我的查看代码。

<ion-content class="bg-color">
  <ion-grid>
     <ion-row>
         <ion-col size="12">
             <div style="display: flex; align-items: center;">
                <h5 style="display: inline;margin-bottom: 0; margin-right:1em">
                  Quantity
                </h5>
                <ion-button (click)="decreaseItemCount()">
                  <ion-icon name="remove-outline"></ion-icon>
                </ion-button>
                <ion-content>{{itemCount}} Selected</ion-content>
                <ion-button (click)="increaseItemCount()">
                  <ion-icon name="add-outline"></ion-icon>
                </ion-button>
              </div>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

我看到的只有

但它也应该显示 1 Selected。在控制台上显示，按下按钮时 itemCount 变量正在增加或减少。

Answer 1

看起来 ion-content 里面的 ion-content 就是问题所在。尝试将 ion-content 替换为 div 或其他内容。有效。

<div>{{itemCount}} Selected</div>

Ionic 5变量变量插值不起作用

Ionic 5 variable Variable Interpolation is not working

ionic-framework

angular

ionic5