从Angular 4 Typescript组件中的另一个对象调用类对象时出错答案

【问题标题】：Error while calling a class object from another object in Angular 4 Typescript component从Angular 4 Typescript组件中的另一个对象调用类对象时出错
【发布时间】：2017-06-07 12:15:25
【问题描述】：

问题简介 这是我来自 Angular 4 项目的 newcomp.component.ts 文件。我使用 Angular CLI 创建了这个项目，所以它组织得很好。我的应用名称是 cvfy。所以文件夹和文件结构如下： CVFY

-e2e（文件夹）

-node_modules（文件夹）

-服务器（文件夹）

-src（文件夹）

--环境（文件夹）

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

【问题讨论】：

标签： angular class object typescript

【解决方案1】：

您可以在您的类中使用 Array，使其更具静态类型。

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

template 将以下内容排列成无序列表和有序列表的组合。

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

【讨论】：