时间戳

首页 > 解决方案 > 加载数据时如何禁用跨度中的fa图标？

javascript - 加载数据时如何禁用跨度中的fa图标？

问题描述

我有角 11 应用程序。我正在使用一个图标来加载图表。但是触发图标时加载图表的时间需要很长时间。所以为了防止用户多次触发图标。我想禁用图标，直到加载图表。

所以这就是我的图标：

<span    (click)="createChartFromMap(selectedSensor.sensor.charts[0],selectedSensor.properties['key'],selectedSensor.properties['name'] )"
    class="ml-auto "   >
    <fa-icon [icon]="selectedSensor.sensor.icon"  [styles]="{'color': '#BF0404'}" size="lg" class="menu-list-item">
    </fa-icon>
  </span>

这是方法：

createChartFromMap(element: string, node: string, name: string) {
    const chartParams: ChartParams = new ChartParamsObj(
      node,
      DateTime.utc().startOf('day').toISO(),
      DateTime.utc().endOf('day').toISO(),
      'P1D'
    );

    const el = {
      config: {
        label: `${name}`,
        xrange: [
          DateTime.local().startOf('day').toFormat('yyyy-LL-dd HH:mm:ss'),
          DateTime.local().endOf('day').toFormat('yyyy-LL-dd HH:mm:ss')
        ],
        yrange:[0, 10]
      },
      type: element,
      paramObj: chartParams
    };

    this.mapRegistryService.components.load(el.type, el.config, el.paramObj);
  }

加载数据的服务如下所示：

$blockButtonGraph: Observable<boolean>;

  components = {
    'area-chart':
    {
      component: AreaChartComponent,
      config: {
        grid: {          
          style: 'area-chart',
        },
        call: (params): Observable<WifiDensityDto[]> => {
          return this.wifiDensityService.getWifiDensities(
            DateTime.utc(params.start).startOf('day').toISO(),
            DateTime.utc(params.end).endOf('day').toISO(),
            params.node)
        },
      }
    },
    'line-chart':
    {
      component: LineChartComponent,
      config: {
        grid: {         
          style: 'line-chart'
        },
        call: (params) => {
          return this.cameraValuesService.cameraDataInInterval(
            params.start,
            params.end,
            params.node)
        }
      }
    },
    load: (comp, config, paramObj?) => {
      const cmp =JSON.parse(JSON.stringify(this.components[comp]));
      cmp.config.grid.label = config.label;
      cmp.config.grid.id = this.components.createUnId();
     
    },
    createUnId: () => {
      const id = new Date().getTime();
      return id;
    },
    register: (comp: any, injector: Injector) => {
      const factory = new WidgetFactory(
        this.components[comp.config.grid.name].component,
        {
          element: comp.config.grid.name,
          config: comp.config
        }
      );       
    }
  };

所以我做了一个 $blockButtonGraph 可观察的。

但是现在如何使用 observable 呢？

谢谢

标签： javascriptangulartypescriptrxjsredux-observable

解决方案

[disabled]在您的模板中使用。我不确定，但您可能必须将您的更改<span>为 a<button>但它看起来像这样：

<button 
    (click)=createChartFromMap(...)
    [disabled]=$blockButtonGraph | async>
</button>

推荐阅读