javascript - 异常 : Cannot find a differ supporting object 'storeApps' in [apps in AppWidgetsComponent@8:28]

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>