TypeScript 无法使用字典接口答案

【问题标题】：TypeScript can't manage to use dictionary interfaceTypeScript 无法使用字典接口
【发布时间】：2021-05-01 11:14:08
【问题描述】：

我对 TypeScript 比较陌生，它一直抱怨变量的类型为“未知”，所以我决定创建一个接口来解决这个问题。但我无法找到有效的解决方案。这是我到目前为止所带来的：

我要使用的数据来自一个看起来像这个data.json的json，这个json被简化了很多：

{
"userName":"usernamedummy",
"projects":{
   "key1":{
      "projname":"dummyname0",
      "layers":{
         "keyinside1":{
            "layername":"dummylayername0",
    
         }
      }
   },
   "key2":{
      "projname":"dummyname",
      "layers":{
         "keyinside2":{
            "layername":"dummylayername"
         }
   }
}
}

我的主要组件如下所示：

import { Component, Input, Output, EventEmitter } from '@angular/core';
import data from './data.json';
export interface Project {
    [key: string]: {
        projname: string;
        layers: {
            [key: string]: {
                layername: string;
            };
        };
    };
}
@Component({
    selector: 'app-layers',
    templateUrl: './layers.component.html',
    styleUrls: ['./layers.component.less'],
})
export class LayersComponent {
    layerListSource: Project;
    constructor() {
        this.layerListSource = data.projects;
    }
}

然后像这样对另一个组件执行 *ngFor：

  <li *ngFor="let project of layerListSource| keyvalue">
      <app-layer-dropdown [project]="project"></app-layer-dropdown>
  </li>

在另一个组件中它看起来像这样：

import { Component, Input, OnInit } from '@angular/core';
import { Project } from '../layers.component';

@Component({
    selector: 'app-layer-dropdown',
    templateUrl: './layer-dropdown.component.html',
    styleUrls: ['./layer-dropdown.component.less'],
})
export class LayerDropdownComponent implements OnInit {
    @Input() project!: Project;
    open: boolean;
    constructor() {
        this.open = false;
    }

    ngOnInit(): void {
        console.log(this.project)
    }
}

这样会产生这个问题：

【问题讨论】：

标签： angular typescript

【解决方案1】：

KeyValuePipe 将您的列表转换为键/值对，因此您需要绑定到值：

<li *ngFor="let project of layerListSource| keyvalue">
      <app-layer-dropdown [project]="project.value"></app-layer-dropdown>
</li>

参考https://angular.io/api/common/KeyValuePipe。

[edit] 同样，在您的层组件中，您可能必须更改接口，因为您绑定的不是字典，而是字典的值：

export interface LayerDict {
    [key: string]: {
        layername: string;
    };
}
export interface Project {
    projname: string;
    layers: LayerDict;
}
export interface ProjectDict {
    [key: string]: Project ;
}

// LayersComponent 
layerListSource: ProjectDict;

// LayerDropdownComponent
@Input() project!: Project;

【讨论】：