Angular 无法在中查看HTML中的值更改

我的组件上有这个

import { Component, OnInit } from '@angular/core';
import { DrinkType } from 'src/app/_models/drinkType.model';
import { DrinkTypeService } from 'src/app/_services/drink-type.service';

@Component({
  selector: 'app-add-sale',
  templateUrl: './add-sale.component.html',
  styleUrls: ['./add-sale.component.scss']
})
export class AddSaleComponent implements OnInit {

  drinkTypeList: any[];
  drinkTypes: DrinkType[];

  selectedDrink: DrinkType;

  drinkQuantity = 0;

  constructor(
    private dts: DrinkTypeService
  ) { }

  ngOnInit() {
    this.getDrinkTypes();
    this.drinkQuantity = 0;
  }

  getDrinkTypes() {
    this.dts.getDrinkTypes().subscribe(res => {
      this.drinkTypeList = res.map(item => {
        return {
          id: item.payload.doc.id,
          ...item.payload.doc.data()
        }
      });
      this.drinkTypes = this.drinkTypeList;
    });
  }

  onSelectDrink(drinkType: DrinkType) {
    this.drinkQuantity = 0;
    this.selectedDrink = drinkType;
  }

  onAddQuantity() {
    this.drinkQuantity = this.drinkQuantity + 1;
    console.log(this.drinkQuantity);
  }

  onReduceQuantity() {
    this.drinkQuantity = this.drinkQuantity - 1;
    console.log(this.drinkQuantity);
  }
}

在我的html中

<div mdbModal #drinkQuantity="mdb-modal" class="modal fade bottom" id="centralModalSuccess" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-notify modal-success" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <p class="heading lead"><mdb-icon fas icon="glass-martini-alt"></mdb-icon>&nbsp;&nbsp;&nbsp; {{ selectedDrink?.name }}</p>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="drinkQuantity.hide()">
          <span aria-hidden="true" class="white-text">×</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="text-center">
          <span>
            <mdb-icon fas icon="plus" (click)="onAddQuantity()" size="4x" class="mb-3 animated rotateIn"></mdb-icon>
          </span>
           <h1>
             {{drinkQuantity | json}}
           </h1>
            <mdb-icon fas icon="minus" (click)="onReduceQuantity()" size="4x" class="mb-3 animated rotateIn"></mdb-icon>
        </div>
      </div>
      <div class="modal-footer justify-content-center">
        <a type="button" class="btn btn-primary-modal waves-light" mdbWavesEffect>Get it now
          <mdb-icon far icon="gem" class=" ml-1"></mdb-icon>
        </a>
        <a type="button" class="btn btn-outline-secondary-modal" data-dismiss="modal" (click)="drinkQuantity.hide()" mdbWavesEffect>No, thanks</a>
      </div>
    </div>
  </div>
</div>

{{selectedDrink？.name}
×
{{drinkQuantity}json}
现在就去拿
不，谢谢

当我使用{{drinkQuantity | json}}时，我得到以下错误：

错误类型错误：将循环结构转换为JSON -->从构造函数为“Subscriber”的对象开始 |属性'\u subscriptions'->构造函数为'Array'的对象 |索引0->具有构造函数“SubjectSubscription”的对象 ---属性“\u parentOrParents”关闭该圆

---

此div位于同一组件的my模式中。我不明白的是，为什么当我显示这个模式时，{{drinkQuantity}}是[object object]，当我点击图标时，我会在控制台中得到结果，但不会在HTML上得到结果。

你能发布更多的ts和HTML代码吗？因为通过查看这个，一切看起来都很好。你能在StackBiltz中共享它吗

span

标记拼写不正确。您能否尝试

{{drinkQuantity | json}

检查

drinkQuantity的值是多少

请在将标记更正为后重试请参阅我的编辑。。。非常感谢。