Question

<p (mouseover)="info.innerText = 'Detailed info'" 
   (mouseout)="info.innerText = 'Mouseover for details'">
    Select it
</p>
<br>    
<p #info *ngIf="queuedTasks > 0">
    Mouseover for details
</p>

当我尝试将其组合时，浏览器调试器会说

错误：self.context.info未定义

可以一起使用吗？

Answer 1

你读过整个角度2的文档，因为我从来没有听说过#variable而是#reference或#template？因此，请不要犹豫，查看此链接https://www.concretepage.com/angular-2/angular-2-template-reference-variable-example

必须使用Viewchild装饰器声明Angular 2中的引用在你的情况下：

@ViewChild("info") info: any;
ngAfterViewInit() {
   console.log(this.info); // instead of self.context.info
   // this will give you the ElementRef value for your p element
}

如果您需要在ngIf条件中显示内容，请使用<p>{{info}}</p>代替<p #info>

Answer 2

我不确定您是否可以找到解决方案，因为当#info为*ngIf时false不存在。但是你可以使用一个简单的变量：

在您的TS文件中：

export class MyComponent {
    public text = 'Mouseover for details';
    // ...
}

在您的HTMl文件中：

<p (mouseover)="text = 'Detailed info'" 
   (mouseout)="text  = 'Mouseover for details'">
    Select it
</p>
<br>    
<p *ngIf="queuedTasks > 0">
    {{text }}
</p>

或者您也可以尝试[hidden]而不是*ngIf。

Angular 2：将* ngIf和#template结合在一起

2 个答案: