html - 无法设置动态创建的 .innerHTML (Angular)

Question

我正在尝试更改动态生成的 <'span> 内的文本。<'span> 是在列表 (<'ul><'li>) 中生成的，如果选择更改，则该列表会更改其项目数 (li)。

这是动态列表（有效）

<ul *ngIf="placeholder[0]">
  <li *ngFor="let time of placeholder[0], let i = index" >
    <div><span id="timer0{{i}}"> lol </span><span *ngIf="timer[0].timeLeft[i] > 0"> : {{timer[0].timeLeft[i]}} secondi <button (click)="restart(0, i)"> reset qua</button><button (click)="check()"> check div</button></span></div>
  </li>
</ul>

这是我试图在其中更改文本的 Typescript 代码<span id = "timer0{{i}}">

setTime(i: number){
    //setting del timer (azzero tutti i campi)
    this.placeholder[i]=[]

    this.timer[i].lunghezza = Object.keys(this.datiX.fileJson.ricette[this.datiX.postazioniNome[this.datiX.defPostazione]][this.datiX.ricetta[i]]).length;

    for (let j = 0; j < this.timer[i].lunghezza; j++) {    
      this.placeholder[i][j] = [""]
    }

    for (let j = 0; j < this.timer[i].lunghezza; j++) {    
      this.pauseTimer(i, j);

      this.timer[i].inizio[j] = 0;
      this.timer[i].fine[j] = Object.keys(this.datiX.fileJson.ricette[this.datiX.postazioniNome[this.datiX.defPostazione]][this.datiX.ricetta[i]][j]).length;
      this.timer[i].timeLeft[j] = <number> <unknown>Object.keys(this.datiX.fileJson.ricette[this.datiX.postazioniNome[this.datiX.defPostazione]][this.datiX.ricetta[i]][j][0])[this.timer[i].inizio[j]];
    }

    console.log("check: ",document.getElementById('timer01'))

  }

console.log("check: ",document.getElementById('timer01'))在函数内部给了我 = null，但是如果我调用一个打印它的函数（按下检查按钮后），它会给我正确的值（“哈哈”）...

我做错了什么？

标签： htmlangulartypescriptdynamicgetelementbyid