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;