Термометр Наполнитель Угловой

Question

room.component.html

<div
          nz-col
          class="cards__item gutter-row"
          nzXs="24"
          nzMd="12"
          nzXl="12"
          nzXXl="8"
          *ngFor="let data of tempThermometer; let i = index"
        >
          <div class="card gutter-box" style="position: relative">
            <div id="wrapper">
              <div id="termometer">
                <div id="{{ 'temperature-' + i }}" style="height:0" data-value="0°F" class="temperature"></div>
                <div id="graduations"></div>
              </div>

              <div id="playground" style="">
                <label>Temperature</label>
                <div id="range" style="display:none">
                  <input
                    type="range"
                    min="0"
                    max="100"
                    (ngModelChange)="changeValue($event, i)"
                    name="{{ data.sensor + 'i' }}"
                    [(ngModel)]="data.temperature"
                  />
                  <p>{{ data.temperature }}</p>
                </div>
              </div>
            </div>
              </div>
            </div>

room.component.ts

changeValue(result: any, index: number) {
    let temperature = document.getElementById(`temperature-${index}`) as HTMLCanvasElement; 
    temperature.style.height = (result - this.config.minTemp) / (this.config.maxTemp - this.config.minTemp) * 100 + "%";
    temperature.dataset.value = result + this.units[this.config.unit];
  }

Проблема в том, что заполнитель неотобразить значение или заполнить его. вывод всегда "0", но когда я пытаюсь получить значение data.temperature, у него есть данные.