如何修复过滤器搜索以在列表项中显示仪表图

Question

如何修复搜索过滤器列表项中的仪表图。

list.component.ts

<ul class="cards">
        <li class="cards__item" *ngFor="let data of option; let i = index">
          <div class="card">
            <div echarts [options]="data" id="{{'chart-' + i}}" [autoResize]="true"></div>
            <div class="card__content">
              <button class="btn btn--block card__btn">Button</button>
            </div>
          </div>
        </li>
      </ul>

list.component.ts

gaugeChart() {
    this.rowData = record.default.records;//line 214

    this.option = [];

    this.rowData.forEach(room => {
      this.option.push({
        tooltip: {
          formatter: "{a} <br/>{b} : {c}°"
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: false },
            restore: { show: false },
            saveAsImage: { show: false }
          }
        },
        series: [
          {
            name: room.sensor,
            type: 'gauge',
            center: ['40%', '70%'],
            splitNumber: 10,
            radius: '70%',
            axisLine: {
              lineStyle: {
                color: [[0.2, '#48b'], [0.8, '#228b22'], [1, '#ff0000']],
                width: 8
              }
            },
            axisTick: {
              splitNumber: 10,
              length: 12,
              lineStyle: {
                color: 'auto'
              }
            },
            axisLabel: {
              textStyle: {
                color: 'auto'
              }
            },
            splitLine: {
              show: true,
              length: 30,
              lineStyle: {
                color: 'auto'
              }
            },
            pointer: {
              width: 5
            },
            title: {
              show: true,
              offsetCenter: [0, '65%'],
              textStyle: {
                fontWeight: 'bolder'
              }
            },
            detail: {
              formatter: '{value}°',
              textStyle: {
                color: 'auto',
                fontWeight: 'bolder'
              }
            },
            data: [{ value: this.tempGenerator(), name: "Temperature" }]
          }
        ]
      });
    });
setInterval(() => {
      for (let i = 0; i < this.option.length; i++) {
        const guage = echarts.init(document.getElementById(`chart-${i}`) as HTMLCanvasElement);

        for (let x = 0; x < this.option[i].series.length; x++) {
          this.option[i].series[x].data[0].value = this.tempGenerator();
          guage.setOption(this.option[i], true);
        }
      }
    }, 10000);

  }


 searchData(searchValue: any) {
    this.rowData = record.default.records;
    this.option = this.rowData.filter((item: templogRecord) => {

      return item.sensor.toLowerCase().includes(searchValue.toLowerCase());

    })
    console.log('option:', this.option);
  }

每次键入/搜索时，它都不会显示量规表。 输出为空白。

ERROR

 ERROR TypeError: Cannot read property 'length' of undefined
        at list.component.ts:214
        at ZoneDelegate.invokeTask (zone-evergreen.js:391)
        at Object.onInvokeTask (core.js:32819)
        at ZoneDelegate.invokeTask (zone-evergreen.js:390)
        at Zone.runTask (zone-evergreen.js:168)
        at invokeTask (zone-evergreen.js:465)
        at ZoneTask.invoke (zone-evergreen.js:454)
        at timer (zone-evergreen.js:2650)