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

Question

我有一份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。

但是现在该如何使用该观察值呢？

谢谢

Answer 1

在模板中使用[disabled]。我不确定，但您可能必须将您的<span>更改为<button>，但它将如下所示：

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