Fehler beim Aufrufen eines Klassenobjekts von einem anderen Objekt in Angular 4 Typoskript-Komponente

Question

Einführung in das Problem Hier ist meine Newcomp.component.ts-Datei von Angular 4-Projekt. Ich habe das Projekt mit Angular CLI erstellt, so dass es gut organisiert ist. Der Name meiner App ist cvfy. So ist die Ordner- und Dateistruktur ist wie folgt: CVFY

-e2e (Ordner)

-node_modules (Ordner)

-Server (Ordner)

-src (Ordner)

--environments (Ordner)

--assets (Ordner)

--app (Ordner)

--- app.component.css (Datei)

--- app.component.html (Datei)

--- app.component .spec.ts (Datei)

--- app.component.ts (Datei)

--- app.module.ts (Datei)

--- clientlogos.ts (Datei)

--- imageclass.ts (Datei)

--- clientscomp (Ordner)

---- clientscomp. component.html (Datei)

---- clientscomp.component.spec.ts (Datei)

---- clientscomp.component.ts (Datei)

Ich habe die wichtigen Dateien und Ordner oben für mein Problem ich meinen Code in clientscomp.component.ts Datei schreibe und mit Klassen clientlogos.ts und 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[]; 
} 

Pixma.ts

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

Der Fehler zeigt es auf die Anwendung ausgeführt wird:

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

Sie Array in Ihnen Klasse verwenden können, um es noch statisch typisiert.

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; 
} 

Komponente

Sie versuchen füllen this.menus die auch stark Array eingegeben werden // sicherstellen, dass der Code zu kompilieren geschrieben wird.

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) } 
    ); 
    } 

Vorlage Ordnen Sie die folgenden als eine Kombination von ungeordnete und geordnete Liste.

<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>