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

如何解决如何在加载数据时禁用跨度中的 fa 图标？

我有 anuglar 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。

但是现在如何使用可观察的？

谢谢

解决方法

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

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