I need to create a chart for each product, and I do not know how many products have in the array in advance. So, in the template I'm dynamically creating the canvas like this:
<div *ngFor="let item of Grafico; let i = index">
<canvas id="canvas{{i}}" #myId></canvas>
</div>
In the component I put @ViewChildren like this:
@ViewChildren('myId') myCharts: QueryList<ElementRef>;
For the graph, in the Array forEach I would create the graph like this:
var grafico = new Chart ( 'idDoCanvas', { dados do gráfico });
This myCharts returns an array of type QueryList. How would I use myChars instead of 'idDoCanvas'?
For example. In one pass considering the data received in the array it generated 2 canvas (corresponding to 2 products). In the DOM they were created as canvas0 and canvas1. I tried to put canvas${i} , but it did not work. You would have to make use of elementRef. But what about ElementRef?
The myCharts console.log returns an array with more or less this structure:
QueryList {dirty: false, _results: Array(0), changes: EventEmitter, length: 0, last: undefined, …}
changes: EventEmitter {_isScalar: false, observers: Array(0), closed: false, isStopped: false, hasError: false, …}
dirty: false
first: ElementRef {nativeElement: canvas#canvas0}
last: ElementRef {nativeElement: canvas#canvas1}
length: 2
_results: Array(2)
0: ElementRef
nativeElement: canvas#canvas0
accessKey: ""
assignedSlot: null
attributeStyleMap: StylePropertyMap {size: 0}
attributes: NamedNodeMap {0: _ngcontent-c6, 1: id, _ngcontent-c6: _ngcontent-c6, id: id, length: 2}
autocapitalize: ""
baseURI: "http://localhost:4200/"
childElementCount: 0
childNodes: NodeList []
children: HTMLCollection []
classList: DOMTokenList [value: ""]
className: ""
clientHeight: 150
clientLeft: 0
clientTop: 0
clientWidth: 300
contentEditable: "inherit"
dataset: DOMStringMap {}
dir: ""
draggable: false
firstChild: null
firstElementChild: null
height: 150
hidden: false
id: "canvas0"
innerHTML: ""
innerText: ""
inputMode: ""
isConnected: true
isContentEditable: false
lang: ""
lastChild: null
lastElementChild: null
localName: "canvas"
namespaceURI: "http://www.w3.org/1999/xhtml"
nextElementSibling: null
nextSibling: null
nodeName: "CANVAS"
nodeType: 1
nodeValue: null
nonce: ""
offsetHeight: 150
offsetLeft: 0
offsetParent: mdl-card.demo-card-image.mdl-cell.mdl-cell--4-col.mdl-shadow--0dp.mdl-card
offsetTop: 0
offsetWidth: 300
onabort: (...)
onauxclick: (...)
onbeforecopy: (...)
onbeforecut: (...)
onbeforepaste: (...)
onblur: (...)
oncancel: (...)
oncanplay: (...)
oncanplaythrough: (...)
onchange: (...)
onclick: (...)
onclose: (...)
oncontextmenu: (...)
oncopy: (...)
oncuechange: (...)
oncut: (...)
ondblclick: (...)
ondrag: (...)
ondragend: (...)
ondragenter: (...)
ondragleave: (...)
ondragover: (...)
ondragstart: (...)
ondrop: (...)
ondurationchange: (...)
onemptied: (...)
onended: (...)
onerror: (...)
onfocus: (...)
ongotpointercapture: (...)
oninput: (...)
oninvalid: (...)
onkeydown: (...)
onkeypress: (...)
onkeyup: (...)
onload: (...)
onloadeddata: (...)
onloadedmetadata: (...)
onloadstart: (...)
onlostpointercapture: (...)
onmousedown: (...)
onmouseenter: (...)
onmouseleave: (...)
onmousemove: (...)
onmouseout: (...)
onmouseover: (...)
onmouseup: (...)
onmousewheel: (...)
onpaste: (...)
onpause: (...)
onplay: (...)
onplaying: (...)
onpointercancel: (...)
onpointerdown: (...)
onpointerenter: (...)
onpointerleave: (...)
onpointermove: (...)
onpointerout: (...)
onpointerover: (...)
onpointerup: (...)
onprogress: (...)
onratechange: (...)
onreset: (...)
onresize: (...)
onscroll: (...)
onsearch: (...)
onseeked: (...)
onseeking: (...)
onselect: (...)
onselectstart: (...)
onstalled: (...)
onsubmit: (...)
onsuspend: (...)
ontimeupdate: (...)
ontoggle: (...)
onvolumechange: (...)
onwaiting: (...)
onwebkitfullscreenchange: (...)
onwebkitfullscreenerror: (...)
onwheel: (...)
outerHTML: "<canvas _ngcontent-c6="" id="canvas0"></canvas>"
outerText: ""
ownerDocument: document
parentElement: div
parentNode: div
prefix: null
previousElementSibling: null
previousSibling: null
scrollHeight: 150
scrollLeft: 0
scrollTop: 0
scrollWidth: 300
shadowRoot: null
slot: ""
spellcheck: true
style: CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
tabIndex: -1
tagName: "CANVAS"
textContent: ""
title: ""
translate: true
width: 300
__proto__: HTMLCanvasElement
__proto__: Object
1: ElementRef {nativeElement: canvas#canvas1}
length: 2
__proto__: Array(0)
__proto__: Object
Can anyone help me? Thanks