例外：在 [AppWidgetsComponent@8:28 中的应用程序] 中找不到不同的支持对象“storeApps”

Question

好的，我有一个很多人似乎都遇到过的问题，但 stackoverflow 或 GitHub 上的解决方案似乎都没有帮助。

我收到一个错误：

EXCEPTION: Cannot find a differ supporting object 'storeApps' in [apps in AppWidgetsComponent@8:28]

我认为这是由 ngFor 引起的：

<div class="container app-widgets">
    <div class="row">
        <div class="col-sm-10 col-sm-offet-1">
            <div class="container">
                <div class="row">
                    <ul>
                        <li *ngFor="#widget of apps"></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

对应的组件定义为：

import { Component, Input } from 'angular2/core';
import { NgFor } from 'angular2/common';
import { AppWidgetComponent } from '../appwidget/appwidget.component';
import { StoreApp } from '../../models';

@Component({
    selector: 'app-widgets',
    template: require('./appwidgets.component.html'),
    styles: [require('../../../sass/appwidgets.scss').toString()],
    directives: [AppWidgetComponent]
})
export class AppWidgetsComponent {
    @Input() apps: Array<StoreApp>;
}

我正在像这样使用app-widgets 组件：

<app-widgets apps=storeApps></app-widgets>

我在对应的组件定义中设置storeApps：

@Component({
    selector: 'home',
    template: require('./home.component.html'),
    styles: [require('../../../sass/home.scss').toString()],
    directives: [AppWidgetsComponent, RecommendedRecentComponent]
})
export class HomeComponent {
    private storeApps: Array<StoreApp>;

    constructor(private _appsService: AppsService) {
    }

    recentSelected() {
        this._appsService.getRecentApps()
            .subscribe(
                storeApps => {
                    this.storeApps = storeApps;
                    this.storeApps.forEach(element => {
                        console.log(JSON.stringify(element));
                        console.log();
                    })
                },
                (error: any) => AppComponent.generalError(error.status)
            );
    }
}   

AppService.getRecentApps() 方法如下所示：

public getRecentApps() {
    return this.http.get(`${appSettings.apiRoot}resources/recent`)
        .map(res => <StoreApp[]> res.json().data)
        .catch(this.handleError);
}

让我感到困惑的是，为什么它抱怨的是出现在应用程序组件中的storeApps，而不是出现在app-widgets 组件中的apps。

大家有什么想法吗？

Answer 1

在您的代码中：

<app-widgets apps=storeApps></app-widgets>

等价于这个表达式（它将属性值设置为字符串"storeApps"）：

<app-widgets [attr.apps]="'storeApps'"></app-widgets>

你应该使用：

<app-widgets [apps]="storeApps"></app-widgets>