Tengo una variable miembro total explícitamente de number de tipo (en una aplicación Angular strict ) que se inicializa en el constructor pero luego se muestra como any tipo en el método drawSlices() , lo que da como resultado que mi etiqueta de información sobre herramientas muestre NaN .
export class SomeComponent implements OnInit { total: number; dataSource: Item[]; constructor(private dataService: DataService) { this.dataSource = this.dataService.getData(); this.total = this.dataSource.reduce((sum, element) => sum += element.abs, 0); } drawSlices() { const mousemove = function (event, d) { const percent = (Math.abs(d.data.abs / this.total) * 100).toFixed(2) + "%"; tooltip .style("left", (event.pageX) + "px") .style("top", (event.pageY - 80) + "px") .style("display", "block") .style("opacity", 1) .style("height", "40px"); tooltip.html(`name: ${d.data.name}<br>value: ${d.data.value}<br>share: ${percent}`); } }He intentado forzar el tipo y soluciones similares, sin éxito...
let t: number = this.total; const percent = (Math.abs(d.data.abs / t) * 100).toFixed(2) + "%"; ¿Cómo soluciono esto para obtener un número seguido de % ?
El problema se debe al alcance de 'esto' en la función mousemove. Convierta la función normal en una función ES6 (flecha) y debería estar listo para comenzar. Obtendrá el alcance del componente y devolverá la variable 'total' correcta.
const mousemove = (event, d) => { const percent = (Math.abs(d.data.abs / this.total) * 100).toFixed(2) + "%"; ... }Ponga un punto de depuración para la línea que está usando this.total y vea el valor que se le asignó.