Kendo Angular UI Gauges 更新后自行调整大小答案

【问题标题】：Kendo Angular UI Gauges resize themself after updateKendo Angular UI Gauges 更新后自行调整大小
【发布时间】：2019-09-17 12:19:19
【问题描述】：

我正在使用来自 Kendo UI 的 RedialGauge 和 angular。

我每 3 分钟使用 rxjs 从 api 动态加载仪表的数据，这是我的代码：

interval(2e5)
   .pipe(
      startWith(() => forkJoin(
          this.service.getStatistics(),
          this.service.otherCall()
        )
      ),
      switchMap(() => forkJoin(
          this.service.getStatistics(),
          this.service.otherCall()
        )
      ),
      retryWhen((err) => err.pipe(
          take(3)
        )
      )
   ).subscribe(([statistics, others]) => {
      this.statistics = statistics;
      ...
   });

初始化加载后一切正常，仪表看起来像他们应该的那样

但是在下一次更新后，仪表会随机调整它们的大小

【问题讨论】：

请分享一个最小的 Stackblitz。

标签： angular kendo-ui

【解决方案1】：

这是我想出的结果，它有点老套，但它是唯一真正有效的解决方案。

当我想更新仪表时，我基本上会重新加载组件。

public refreshComponent(): void {
   const url = this.router.url;
   this.router.navigateByUrl('/app', {skipLocationChange: true}).then(() => {
      this.router.navigate([url]);
   });
}

【讨论】：

【解决方案2】：

我建议你用一个 div 包围你的径向量规。

在您的 div 中使用 ngIf。

在你的 ngAfterViewInit() 中设置 true

类似的东西：

        <div *ngIf="isLoaded">
          <kendo-radialgauge class="kendoChart" [pointer]="[{ value: value }]">
            <kendo-radialgauge-scale [startAngle]="startAngle" [endAngle]="endAngle">            
            </kendo-radialgauge-scale>
          </kendo-radialgauge>
        </div>

  public ngAfterViewInit(): void {
      this.isLoaded = true;
  }

【讨论】：

【解决方案3】：

CSS 可能是这里的问题。下面给出一个例子

 #gauge-container {
            border-style:solid;
            border-color:red; 
            background:  transparent url(@Url.Content("~/images/gauge-container-partial.png"));
            background-vertical-position: -500% ;
            background-size: 100% 100%;
            width: auto;
            height: 100%;
            text-align: center;
            margin: -10% auto auto auto;
        }

        #SMDRReceiverMonitorChart {
            border-style:solid;
            border-color:blue; 
            width: auto;
            height: auto;
            align: center;
            margin: auto auto auto auto;

            border-color: transparent;
        }

        #gauge-container .k-slider {
           margin-top: -11px;
            width: 140px;

        }

编辑

注意：这只是一个例子。请调试并尝试相应地更改 css。

【讨论】：