Estoy usando el código plotly en angular 2. Recibo un error para seguir el código. Remití este código.
mi código es:
var plotDiv = document.getElementById('myDiv'); plotDiv.on('plotly_relayout', function(eventdata){ alert( 'ZOOM!' + '\n\n' + 'Event data:' + '\n' + JSON.stringify(eventdata) + '\n\n' + 'x-axis start:' + new Date(eventdata['xaxis.range[0]'])+ '\n' + 'x-axis end:' + new Date(eventdata['xaxis.range[1]'])); var xVal = new Date(eventdata['xaxis.range[0]']); var yVal = new Date(eventdata['xaxis.range[1]']); } );Recibo un error para la función plotDiv.on('....'). ¿Hay alguna función alternativa para .on() en angular 2? Por favor, ayúdame. Me quedé aquí.
Para evitar este error puedes escribir:
var plotDiv: any = document.getElementById('myDiv'); plotDiv.on('plotly_relayout', ... document.getElementById('myDiv') devuelve HTMLElement . Este tipo no contiene on método porque este método se agrega dentro plotly-latest.min.js . Entonces, para silenciar la advertencia de mecanografiado, puede decir explícitamente compilar para no verificar los tipos para plotDiv
Otra forma es crear una definición de tipo como:
interface PlotHTMLElement extends HTMLElement { on(eventName: string, handler: Function): void; } var plotDiv = <PlotHTMLElement>document.getElementById('myDiv') plotDiv.on('plotly_relayout', function() { });Mi enfoque preferido es usar tipos de parámetros literales de cadena para declarar un tipo de retorno especializado para las funciones del selector DOM. Luego definimos propiedades y eventos que son específicos de estos elementos.
Esto es posible gracias a las interfaces abiertas de TypeScript.
// Assuming you using modules as you mention Angular 2 // if this is actually script code and not a module, remove the `declare global` wrapper declare global { interface Document { // This only enhances the return type of getElementById for the exact selector "myDiv". getElementById("myDiv"): HTMLDivElement & { // intersection `&` is used to add the specialized event. on('plotly_relayout', (eventdata: {/* fill this in as needed */}) => void); }; } }Con esta declaración, su núcleo original se verificará. No hay necesidad de introducir aserciones de tipo y podemos mantener un estilo más declarativo. Además, esto sirve como documentación de nuestras expectativas del div myDiv, a nivel de API.
EDITAR:
Parece que puede estar usando jQuery, si es así, el enfoque es el mismo y el código es casi idéntico.
declare global { interface JQueryStatic { ("#myDiv"): JQuery & { on('plotly_relayout', (eventdata: {/* fill this in as needed */}) => void); }; } }