Angular 2 模板的元素引用无法正常工作答案

【问题标题】：Angular 2 template's element reference not working properlyAngular 2 模板的元素引用无法正常工作
【发布时间】：2016-07-27 19:24:06
【问题描述】：

我正在尝试使用 angulars 引用元素直接从模板中操作 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>

我正在使用书中的这段代码，我自己在实现中没有发现任何问题。

【问题讨论】：

执行此操作 {{tooltip | json}} 我认为你的工具提示是空的。确保实例化它。
我认为您正在尝试访问不存在的 #tooltip，您可以先检查它是否存在，然后像 (mouseover)="tooltip && tooltip.innerText = queuedTask.name" 那样对该 DOM 进行操作
嗨 bobek，我使用了 json 管道，但它什么也没显示，我使用 #tooltip 假设它是对 p 标签的引用，我想使用 p 标签 innerText
我将#tooltip添加到p标签<p *ngIf="queuedPomodoros > 0" #tooltip>{{tooltip.innerText || 'Mouseover for details' }}</p>
如果你用 [hidden]="queuedPomodoros < 1" 替换 *ngIf="queuedPomodoros > 0" 它应该可以工作

标签： javascript angularjs angular error-handling

【解决方案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>

【讨论】：

你只是英雄Zhytkevich