使用jquery设置和获取html标记值

我有一个名为“tables”的对象列表，两个用于创建对象和增加或减少对象数量的输入字段，以及一个显示对象总数的html“h5”标记。我想在表的总数等于零时显示“creatinTables”输入字段。如果用户创建了一个表，我想隐藏creatingTables字段并显示UpdateTables（增加或减少数字）字段

我可以从数据库中获取总数并正确地发送到totalTableNumber字段，但是我无法正确地运行用于显示和隐藏字段的jquery代码

HTML

Jquery显示/隐藏字段

输出

---

它正确地显示了表的总数（超过零），但createTables字段未隐藏，update字段现在显示。显示的控制台日志为空，未显示任何内容。

问题在于执行顺序。在我安排好之后，代码就正常工作了

您在这里做什么？

<div class="container">

  <!-- CREATE TABLES -->
  <div id="CreateTables" class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text" id="basic-addon3">Enter the Number of Tables</span>
    </div>
    <form [formGroup]="tableForm" novalidate (ngSubmit)="submitTableNumber()">
      <div class="row">
        <div class="col-lg-5">
          <input type="text" class="form-control" formControlName="counter" id="basic" aria-describedby="basic-addon3">
        </div>
        <div class="col-lg-5">
          <button type="submit" class="btn btn-dark">Save</button>
        </div>
      </div>
    </form>
  </div>
  <!-- INCREASE-DECREASE NUMBER OF TABLES -->
  <div id="UpdateTables" class="input-group mb-3">
    <div class="row">
      <div class="col-lg-3">
        <div class="input-group-prepend">
          <span class="input-group-text" >UPDATE THE NUMBER OF TABLES</span>
        </div>
      </div>
    </div>
    <div class="col-lg-9" style="margin-left: 3%;">
      <form [formGroup]="tableForm">
        <div>
          <label>Increase the tables</label><span></span>
          <button type="button" (click)="addTable()" class="btn btn-sm btn-dark">+</button>
        </div>
      </form>
      <form [formGroup]="tableForm">
        <div>
          <label>Decrease the tables</label><span></span>
          <button type="button" (click)="removeTable()" class="btn btn-sm btn-dark">-</button>
        </div>
      </form>

    </div>

  </div>
  <!-- TOTAL TABLE NUMBER -->
  <div class="row">
    <div class="col-lg-6">
      <h5>Total Table NUmber</h5>
    </div>
    <div id="totalTableNumber" class="col-lg-6">
      <h5 ></h5>
    </div>
  </div>

displayTables() {
    this.companyService.getTables().subscribe(data => {
      this.tables = data;
      this.tableNumber = data.length;

      jQuery('#totalTableNumber').text(this.tableNumber);
      console.log('Total Table Number :' + this.tableNumber);
    });
  }

 formsVisibility() {

    const displayedNumber = $('#totalTableNumber').text();
    console.log('displayed: ' + displayedNumber);

    if (parseInt(displayedNumber, 10) > 0) {
      $('#CreateTables').hide();
      $('#UpdateTables').show();

    } else {
      $('#CreateTables').show();
      $('#UpdateTables').hide();

    }
  }