我正在使用开发一个应用程序
Angular 15
。
我需要创建一个包含多个部分的仪表板。每个部分都应该有一组被命名为数据表示范围的按钮(我需要将其提取到后端)。
我将特别需要按钮:7天,30天,60天和自定义。
为了开发按钮,我创建了
ng-template
:
<ng-template #sectionContainer let-sectionKey='sectionKey'>
<mat-button-toggle-group #group="matButtonToggleGroup"
name="rangeDays"
[value]="sectionsFieldsModel[sectionKey]['dateRangeId']"
(change)="setDataAndUpdateChartBySectionAndFieldKey(group.value, sectionKey, 'dateRangeId')">
<mat-button-toggle value="7dd">7 days</mat-button-toggle>
<mat-button-toggle value="30dd">30 days</mat-button-toggle>
<mat-button-toggle value="60dd">60 days</mat-button-toggle>
<mat-button-toggle value="custom">Custom</mat-button-toggle>
</mat-button-toggle-group>
</ng-template>
在组件的HTML中,我调用了如下模板:
<ng-container *ngTemplateOutlet="sectionContainer; context: { sectionKey: 'totalSells' }">
函数
setDataAndUpdateChartBySectionAndFieldKey
内容如下:
setDataAndUpdateChartBySectionAndFieldKey(value: string, sectionKey: string, fieldKey : string){
this.sectionsFieldsModel[sectionKey][fieldKey] = value;
if(fieldKey == "locationId"){
this.devicesMap["totalSells"] = this.filterDevicelist(value);
}
}
和地图
sectionsFieldsModel
内容如下:
sectionsFieldsModel: {
totalSells: { [keyprop: string]: string };
mostSoldProducts: { [keyprop: string]: string };
usersNumber: { [keyprop: string]: string };
usersAverageCost: { [keyprop: string]: string };
hourlyCost: { [keyprop: string]: string };
} = {
totalSells: {},
mostSoldProducts: {},
usersNumber: {},
usersAverageCost: {},
hourlyCost: {},
};
编译时,编译器返回错误:
error TS7053: Element implicitly has an 'any' type because expression of type 'any' can't be used to index type '{ totalSells: { [keyprop: string]: string; }; mostSoldProduc
ts: { [keyprop: string]: string; }; usersNumber: { [keyprop: string]: string; }; usersAverageCost: { [keyprop: string]: string; }; hourlyCost: { ...; }; }'.
假设我两周前开始学习Angular和TypeScript,有人能告诉我我做错了什么吗?