Angular7，叫ElementRef来

Question

我需要在子节点中获取ElementRef。

我的模板

<div #charts *ngFor="let tag of _tags">
  <jqxBulletChart
    style="margin-left: 10px; float: left;"
    [width]='50'
    [height]='350'
    [barSize]='"35%"'
    [labelsFormat]='"c"'
    [title]="''"
    description="{{tag.configuration.name}}"
    [showTooltip]='true'
    [labelsFormatFunction]="labelsFormatFunction"
    [tooltipFormatFunction]="tooltipFormatFunction" [ticks]='ticks'
    [ranges]='tag.value'
    [pointer]='pointer'
    [orientation]="'vertical'"
  >
  </jqxBulletChart>
</div>

我打电话给

@ViewChildren('charts') infoCharts: ElementRef;

得到孩子

for (let chart of this.arrCharts) {
            console.log(chart);
            console.log(chart.nativeElement.lastChild)
            let child: jqxBulletChartComponent = chart.nativeElement.lastChild;
            console.log(child);
            console.log(+this.tags[count].displayValue);
            child.val(+this.tags[count].displayValue || 0);
            // child.val(20);
            count++;
        }

但我的“孩子”应该是ElementRef型的，我不知道怎么做

Answer 1

请尝试下面的代码，它将为您提供ElementRef for jqxBulletChart

@ViewChildren(jqxBulletChartComponent,{read: ElementRef}) hellos: QueryList<ElementRef>;

请注意，您需要提供JQXBulletChartComponent，并且必须将viewChildren读入ElementRef。

如果对你有用的话请告诉我。

编码愉快！

Answer 2

我认为它不可能是ElementRef的一个实例，因为您使用的是ngFor，有多个引用，您称之为#图表。它应该是QueryList

https://netbasal.com/understanding-viewchildren-contentchildren-and-querylist-in-angular-896b0c689f6e

Answer 3

试试这个：

import {AfterViewInit, Component, QueryList, ViewChildren, ElementRef} from '@angular/core';

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})

export class AppComponent {
  name = "Angular";
  @ViewChildren("charts") charts: QueryList<ElementRef>;

  ngAfterViewInit() {
    this.charts.forEach(c => console.log(c));
  }
}