问题描述
我有 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>