<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>
Cuando intento combinarlo, el depurador del navegador dice
Error: self.context.info no está definido
¿Es posible usarlo juntos?
2 respuestas
¿Ha leído todo el documento de angular 2 porque nunca escuché sobre #variable pero #reference o #template? Así que no dude en consultar este enlace https: / /www.concretepage.com/angular-2/angular-2-template-reference-variable-example
Las referencias en Angular 2 deben declararse usando el decorador Viewchild En su caso:
@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
}
Si necesita mostrar contenido dentro de una condición ngIf, use <p>{{info}}</p> en lugar de <p #info>
No estoy seguro de que pueda encontrar una solución para esto, porque #info no existe cuando ese *ngIf es false. Pero puedes usar una variable simple:
En su archivo TS:
export class MyComponent {
public text = 'Mouseover for details';
// ...
}
En su archivo HTMl:
<p (mouseover)="text = 'Detailed info'"
(mouseout)="text = 'Mouseover for details'">
Select it
</p>
<br>
<p *ngIf="queuedTasks > 0">
{{text }}
</p>
O puede probar [hidden] también en lugar de *ngIf.
Preguntas relacionadas
Nuevas preguntas
angular
Preguntas sobre Angular (que no debe confundirse con AngularJS), el marco web de Google. Use esta etiqueta para preguntas angulares que no son específicas de una versión individual. Para el marco web anterior de AngularJS (1.x), use la etiqueta angularjs.