Angular 2模板的元素引用無法正常工作

Question

我正在嘗試使用角度參考元素直接從模板操縱html p標簽文本，但出現錯誤

這是我的代碼

<p>
    <span *ngFor="let queuedTask of tasks">
      <pomodoro-task-icons
        [task]="queuedTask"
        (mouseover)="tooltip.innerText = queuedTask.name"
        (mouseout)="tooltip.innerText = 'text'">
      </pomodoro-task-icons>
    </span>
  </p>
  <p *ngIf="queuedPomodoros > 0" #tooltip>{{tooltip.innerText || 'Mouseover for details' }}</p>

我正在使用本書中的這段代碼，自己發現自己沒有任何問題。

Answer 1

在您的組件中聲明一個variable

在p標簽中引用此variable ：

 <p *ngIf="queuedPomodoros > 0">{{ variable }}</p>

更改variable的值：

  <pomodoro-task-icons
    [task]="queuedTask"
    (mouseover)="variable = queuedTask.name"
    (mouseout)="variable = 'text'">
  </pomodoro-task-icons>