如何正确声明输入字样

Question

我要低于代码中的错误。

let getVal: string
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'AppComponent'.
  No index signature with a parameter of type 'string' was found on type 'AppComponent'.ts(7053)

因此，如何在Typescript中解决此类型声明问题，如果有人知道，请帮助解决。

app.component.html：

<button *ngFor="let season of seasons" (click)="show(season)">
  {{ season }}
</button>

<div *ngIf="group1">Group 1 content</div>

<div *ngIf="group2">Group 2 content</div>

<div *ngIf="group3">Group 3 content</div>

app.component.ts：

  seasons = ['Group 1', 'Group 2', 'Group 3'];
  group1: boolean = false;
  group2: boolean = false;
  group3: boolean = false;

  show(val: string) { 
    for (var i = 0; i < this.seasons.length; i++) {
      if (this.seasons[i] === val) {
        let getVal = val.toLowerCase().replace(/\s/g, ''); 
        this[getVal] = true; // getting error here
      } else {
        let getVal = this.seasons[i].toLowerCase().replace(/\s/g, ''); 
        this[getVal] = false; // getting error here
      }
    }
  }

Answer 1

您可以尝试使用（这是任何）[getVal] = ...。

但是，我建议这样做类似的事情：

app.component.ts

export class AppComponent {

    readonly groups: { [key: string]: boolean } = {};

    seasons = ['Group 1', 'Group 2', 'Group 3'];

    show(val: string) { 
        for (let i = 0; i < this.seasons.length; i++) {
            if (this.seasons[i] === val) {
                const getVal = val.toLowerCase().replace(/\s/g, ''); 
                this.groups[getVal] = true;
            } else {
                const getVal = this.seasons[i].toLowerCase().replace(/\s/g, '');
                this.groups[getVal] = false;
            }
        }
    }
}

这将与其他组件的其他类成员隔离与类型铸造一起混乱，例如

Object.keys(this.groups).forEach(
    group => console.log(`${group}=${this.groups[group]}`);

app.component.html

<button *ngFor="let season of seasons" (click)="show(season)">
  {{ season }}
</button>

<div *ngIf="groups.group1">Group 1 content</div>

<div *ngIf="groups.group2">Group 2 content</div>

<div *ngIf="groups.group3">Group 3 content</div>

（或动态渲染组）

<ng-container *ngFor="let entry of groups | keyvalue">
    <div *ngIf="!!entry.value">
        {{ group.key }} content
    </div>
</ng-container>