TypeScript 无法使用字典接口

Question

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

我想使用的数据来自 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)
    }
}

这样做会产生这个问题：

Answer 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以供参考。

[编辑] 另外，在您的图层组件中，您可能必须更改接口，因为您绑定的不是字典，而是字典的值：

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;