在Angular2 / TypeScript中找不到模型的命名空间错误

Question

FeaturedCategories模型

export class FeaturedCategories {
    categories: Array<{ id: number, title: string, graphic: string, categorycards: Array<{}> }>;
}

还试过这个：

export class FeaturedCategories {
    id: number;
    title: string;
    graphic: string;
    categorycards: Object[];
}

组件

import { Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
import { ApiService } from '../shared/services/api.service';
import { FeaturedCategories } from '../shared/models/home/featuredcategories';

@Component({
    changeDetection: ChangeDetectionStrategy.Default,
    encapsulation: ViewEncapsulation.Emulated,
    selector: 'home',
    styleUrls: [ './home.component.css' ],
    templateUrl: './home.component.html'
})
export class HomeComponent {
    testFeaturedCategories: Array<FeaturedCategories>;

    constructor(private api: ApiService) {
        // we need the data synchronously for the client to set the server response
        // we create another method so we have more control for testing
        this.universalInit();
    }

    universalInit() {
        console.log('universalInit...')
        this.api.getFeatured()
            .subscribe(categories => {
                console.log('categories', categories);
                this.testFeaturedCategories = categories
            });
    }
}

这将有效：testFeaturedCategories: Array<{}>;

但是我正在尝试使用TypeScript让我的应用程序知道期望的模型类型。

这会导致上述错误： testFeaturedCategories: FeaturedCategories.categories;

如果我试试这个：testFeaturedCategories: FeaturedCategories;

我收到type [{}] is not assignable错误。

更新

所以我注意到，当我在FeaturedCategories模型中注释掉所有键时，错误消失了

featuredCategories: FeaturedCategories[];将有效。

然而现在这只是一个空的对象，没有期望的键:(

export class FeaturedCategories {
    // id: number;
    // title: string;
    // graphic: string;
    // categorycards: Object[];
}

Answer 1

这对我来说很好。

export class MyComponent {
 categories: FeaturedCategories[] = [{
  id: 1,
  title: "",
  graphic: "",
  categorycards: [{}]
 }];
}

export class FeaturedCategories{
 id: number;
 title: string;
 graphic: string;
 categorycards: Object[];
}

Answer 2

我的问题是尝试输入我的数组，而不是只使用较大数组中存在的Typed对象。

我的服务也有问题，原来我有这个：

/**
 * Get featured categories data for homepage
 * /wiki
 */
getFeatured(): Observable<[{}]> {
    return this.http.get(`${this.getFeaturedUrl}/home`)
    // .do(res => console.log('getFeatured res', res.json()))
    .map(res => res.json())
    .catch(this.handleError);
}

我不需要或者甚至不能使用更大的类别数组的类型，我需要的是较大类型存在于较大数组中的确切对象：

export class FeaturedCategory {
    id?: number;
    type: string;
    title: string;
    graphic?: string;
    video?: string;
    categorycards: Array<{}>;
}

现在，在我的数组中使用正确的对象类型，我将其添加到服务中：

getFeatured(): Observable<[FeaturedCategory]> {
    return this.http.get(`${this.getFeaturedUrl}/home`)
    .map(res => res.json())
    .catch(this.handleError);
}

现在回到我的组件中我导入了单个Typed对象

import { FeaturedCategory } from '../shared/models/home/featuredcategory';

然后输入变量：

featuredCategories: Array<FeaturedCategory>;

最后在ngOnInit

ngOnInit() {
    this.api.getFeatured()
        .subscribe(categories => {
            console.log('categories', categories);
            this.featuredCategories = categories;
        });
}

不再有错误：）