Typescript Tips

许久没碰的Angular程序，重新编译一遍，却遇到下列错误：

-error TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ desp: string; validFrom: string; validTo: string; countOfFactLow: string; countOfFactHigh: string; 
timeStart: string; timeEnd: string; daysFrom: string; daysTo: string; point: string; edit: string; }'.

其中，出问题的代码如下：

  dataSchema = {
    // ruleType: AwardRuleTypeEnum = AwardRuleTypeEnum.GoToBedTime;
    // 'targetUser': 'text',
    'desp': 'text',
    'validFrom': 'date',
    'validTo': 'date',
    'countOfFactLow': 'number',
    'countOfFactHigh': 'number',
    // 'doneOfFact': 'boolean',
    'timeStart': 'number',
    'timeEnd': 'number',
    'daysFrom': 'number',
    'daysTo': 'number',
    'point': 'number',
    'edit': 'edit',
  };

然后在HTML中使用：

<div [ngSwitch]="dataSchema[col]" *ngIf="element.isEdit">
    <div class="btn-edit" *ngSwitchCase="'edit'">
    <button (click)="element.isEdit = !element.isEdit">Done</button>
    </div>
    <mat-form-field *ngSwitchCase="'date'" appearance="fill">
    <mat-label>Choose a date</mat-label>
    <input matInput [matDatepicker]="picker" [(ngModel)]="element[col]">
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
    <mat-form-field *ngSwitchDefault>
    <mat-label></mat-label>
    <input [type]="dataSchema[col]" matInput [(ngModel)]="element[col]">
    </mat-form-field>
</div>

参考了Stackoverflow的一个问题：Link

将代码修改为：

  dataSchema: { [key: string]: any } = {
    // ruleType: AwardRuleTypeEnum = AwardRuleTypeEnum.GoToBedTime;
    // 'targetUser': 'text',
    'desp': 'text',
    'validFrom': 'date',
    'validTo': 'date',
    'countOfFactLow': 'number',
    'countOfFactHigh': 'number',
    // 'doneOfFact': 'boolean',
    'timeStart': 'number',
    'timeEnd': 'number',
    'daysFrom': 'number',
    'daysTo': 'number',
    'point': 'number',
    'edit': 'edit',
  };

搞定~