javascript - 单击项目以更改 Angular 链接时如何修复 getAttribute

Question

****list.component.html***

<div *ngFor="let data of temperature">
<div (click)="navigate(data)">
                <div id="{{ 'roomChart-' + i }}" style="height: 210px;"></div>
</div>
</div>

list.component.ts

lineChart() {
const chart = echarts.init(document.getElementById(`roomChart-${index}`) as HTMLCanvasElement);
            this.option = {
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  animation: false
                },
                backgroundColor: 'rgba(245, 245, 245, 0.8)',
                borderWidth: 1,
                borderColor: '#ccc',
                padding: 10,
                textStyle: {
                  color: '#000'
                },
                formatter: function (prm: any) {
                  let rec = prm[0].name.slice(0, 10) + '<br/>' + prm[0].name.slice(11, 19) + '<br/>';

                  for (let x = 0; x < prm.length; x++) {
                    if (prm[x].axisIndex !== 1) {
                      rec += prm[x].marker + ' ' + prm[x].seriesName + ': '
                        + prm[x].data + _this.units['Celcius'] + '<br/>';
                    } else {
                      rec += prm[x].marker + ' ' + prm[x].seriesName + ': '
                        + prm[x].data + '%' + '<br/>';
                    }
                  }
                  return rec;
                }
              },
              ...this.echart.roomChart,
              dataZoom: [{
                type: 'inside',
                show: false,
                bottom: 10,
                width: '84%',
                xAxisIndex: [0, 1],
                zoomOnMouseWheel: false
              },
              {
                type: 'slider',
                bottom: 10,
                show: false,
                width: '84%',
                xAxisIndex: [0, 1],
                zoomLock: true
              }],
              ...this.echart.roomChart.xAxis[0].data = newData[0].date.map((str: any) => {
                return format(str, 'YYYY-MM-DD hh:mm a');
              }),
              ...this.echart.roomChart.xAxis[1].data = newData[0].date.map((str: any) => {
                return format(str, 'YYY-MM-DD hh:mm a');
              }),
              ...this.echart.roomChart.xAxis[0].axisLabel.formatter = ((data: any) => {
                return format(data, 'hh:mm a');
              }),
              series: [
                {
                  name: 'Temerature',
                  data: newData[0].temperature,
                  type: 'line',
                  itemStyle: {
                    color: 'rgba(0, 101, 144, 1)'
                  },
                  areaStyle: {
                    color: 'rgba(0, 101, 144, 1)'
                  },
                  markPoint: {
                    type: 'Pin',
                    data: [
                      {
                        type: 'max',
                        itemStyle: {
                          color: 'rgba(0, 101, 144)'
                        }
                      },
                      {
                        type: 'min',
                        itemStyle: {
                          color: 'rgb(110, 151, 204)'
                        }
                      }
                    ]
                  },
                  smooth: true
                },
                {
                  name: 'Humidity',
                  data: newData[0].humidity,
                  type: 'line',
                  itemStyle: {
                    color: 'rgba(132, 219, 255, 1)'
                  },
                  areaStyle: {
                    color: 'rgba(132, 219, 255, 1)'
                  },
                  markPoint: {
                    type: 'Pin',
                    data: [
                      {
                        type: 'max',
                        itemStyle: {
                          color: 'rgba(132, 219, 255)'
                        }
                      },
                      {
                        type: 'min',
                        itemStyle: {
                          color: 'rgba(194, 237, 255)'
                        }
                      }
                    ]
                  },
                  smooth: true,
                  xAxisIndex: 1,
                  yAxisIndex: 1
                }
              ]
            };

            chart.setOption(this.option);
}


    navigate(data: any) {
    const roomName = encodeURIComponent(data.sensor);
    if (data) {
      this.router.navigate([`/dashboard/room`], {
        queryParams: { room: roomName }
      });
    }
  }

我遇到一个错误，即ERROR TypeError: Cannot read property 'getAttribute' of null。当折线图仍在加载时，单击分区。我收到此错误 ERROR TypeError: Cannot read property 'getAttribute' of null

如何修复错误“无法读取 null 的属性“getAttribute””。

但是当图表全部加载时没有错误，但是当仍在加载并在加载时单击分区/项目时，我收到错误无法读取 null 的属性“getAttribute”

Answer 1

您正在使用getElementById。这超出了 Angular 的世界，因此它无法找到您要选择的元素。

解决方案1:ngAfterViewInit

首先，您必须等待 Angular 绘制 View (= 生成 HTML)，然后您可以对生成的内容使用 getElementById。

ngAfterViewInit() {
 echarts.init(document.getElementById(`roomChart-${index}`) ...
}

但这仍然很棘手，因为将发生的一切都在 Angular 的世界之外。

解决方案 2:

使用Echarts for Angular :)