<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?

0
Gamos 22 feb. 2018 a las 18:31

2 respuestas

La mejor respuesta

¿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>

1
andrea06590 22 feb. 2018 a las 16:13

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.

0
Roland Rácz 22 feb. 2018 a las 16:13