角型4の別のオブジェクトからクラスオブジェクトを呼び出すときにエラーが発生しました。タイプコードコンポーネント

Question

問題の概要 ここに、Angular 4プロジェクトのnewcomp.component.tsファイルがあります。 Angular CLIを使用してプロジェクトを作成したので、整理されています。私のアプリ名はcvfyです。以下のようにフォルダとファイルの構造は次のとおりです。 CVFY

-e2e（フォルダ）

-node_modules（フォルダ）

-server（フォルダ）

-src（フォルダ）

--environments（フォルダ）

--assets（フォルダ）

--app（フォルダ）

--- app.component.css（ファイル）

--- app.component.html（ファイル）

--- app.component .spec.ts（ファイル）

--- app.component.ts（ファイル）

--- app.module.ts（ファイル）

--- clientlogos.ts（ファイル）

--- imageclass.ts（ファイル）

--- clientscomp（フォルダ）

---- clientscomp。 component.html（ファイル）

---- clientscomp.component.spec.ts（ファイル）

----私はclientscomp.component.tsファイルに自分のコードを書いています私の問題 については、上記の重要なファイルやフォルダを言及しているclientscomp.component.ts（ファイル）

とクラスにclientlogos.tsとimageclass.ts

clientscomp.component.ts

を使用して

import { Component, OnInit } from '@angular/core'; 
import { Clientlogos } from "./../clientlogos"; 
import { Imageclass } from "./../imageclass"; 

@Component({ 
    selector: 'app-clientscomp', 
    templateUrl: './clientscomp.component.html', 
    styleUrls: ['./clientscomp.component.css'] 
}) 

export class ClientscompComponent implements OnInit { 

    private imageone: Imageclass[] = [ 
    {"_id":"1", "altClient":"Play Station", "srcClient":"https://cdn3.iconfinder.com/data/icons/flat-icons-web/40/PlayStation-128.png"}, 
    {"_id":"2", "altClient":"Twitter", "srcClient":"https://cdn1.iconfinder.com/data/icons/flat-and-simple-part-1/128/twitter-128.png"} 
    ]; 

    private myrows: Clientlogos[] = [ 
    { 
     "_id":"1", 
     "imagenew": this.imageone 
    } 
    ]; 

    constructor() { } 

    ngOnInit() { 
    } 

} 

clientlogos.ts

import { Imageclass } from "./imageclass"; 

export class Clientlogos { 
    "_id":string; 
    "imagenew":Imageclass[]; 
} 

IMAGECLASS。TS

export class Imageclass { 
    "_id": string; 
    "altClient": string; 
    "srcClient": string; 
} 

、それはアプリケーションを実行する上で示したエラーは次のとおりです。

Failed to compile. 

C:/Users/Dell/Desktop/Learning/cvfy/src/app/clientscomp/clientscomp.component.ts (40,7): Type '{ "_id": string; "imagenew": Imageclass[]; }[]' is not assignable to type 'Clientlogos[]'. 
    Type '{ "_id": string; "imagenew": Imageclass[]; }' is not assignable to type 'Clientlogos'. 
    Object literal may only specify known properties, and '"imagenew"' does not exist in type 'Clientlogos'. 

Answer 1

あなたはそれをより静的に型付けさせるために、あなたのクラスの配列を使用することができます。

class Menu { 
    name: string; 
    categories: Array<Category>; // initialize it as applicable 
} 
class Category { 
    name: string; 
    dishes: Array<Dish>;// initialize it as applicable 
} 
class Dish { 
    name: string; 
} 

コンポーネント

あなたはまた、強く型付けされた配列をされるthis.menusが//コードをコンパイルするために書かれていることを確認してください埋める試すことができます。

getMenus() { 
    this.globals.getMenus().subscribe(
     data => { 
     this.menus = new Array<Menu>(); 
     Object.keys(data).forEach(name => { 
      //Initialize and push items as per data structure. 
      this.menus.push(new Menu(data[name])); 
     }); 

     console.log(this.menus); 
     }, 
     err => { console.log(err) } 
    ); 
    } 

テンプレートが未注文し、順序付けられたリストの組み合わせとして、次を配置します。

<ul> 
    <li *ngFor="let menu of menus"> 
     {{ menu.name }} 
     <ul> 
      <li *ngFor="let category of menu.categories"> 
       {{ category.name }} 
       <ul> 
        <li *ngFor="let dish of category.dishes"> 
         {{ dish.name }} 
        </li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
</ul>