如何从ASP.NET MVC视图使用@Input将JSON数组传递给Angular2模板？

Question

我是Angular2的新手，有很多问题。

我有一些用AngularJS编写的控制器，现在我想将其转换为Angular2组件。

我想将JSON数据传递给组件并在模板中使用。 在AngularJS中，我使用ng-init来做到这一点。

我尝试使用以下方法初始化ASP.NET MVC视图中的组件：

<review [reviewJson]="@Newtonsoft.Json.JsonConvert.SerializeObject(Model.CustomerReviews)"></review>

该组件如下所示：

import { Component, OnInit, Input } from '@angular/core';

@Component({
    selector: 'review',
    template: `
        <div id="reviews-wrapper" class="row">
            <div class="item col-sm-4 col-xs-6" *ngFor="let review of reviewJson">
                <div class="review-card">
                    <div class="review-image"><img [src]="review.Image"/></div>
                    <div class="review-name">review.Name</div>
                    <div class="review-text">review.Text</div>
                </div>
            </div>
        </div>
    `,
    providers: []
})

export class ReviewComponent implements OnInit {

    @Input() reviewJson: any;  

    constructor() {
    }

    ngOnInit() {
        console.log(this.reviewJson);
    }
}

我在其中声明审阅组件的app.module文件如下所示：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';

import { ReviewComponent } from './review.component';

@NgModule({
    imports: [
        BrowserModule,
        HttpModule
    ],
    declarations: [
        ReviewComponent
    ],
    bootstrap: [ReviewComponent],
    providers: [
    ]
})
export class AppModule { }

加载页面时，console.log（this.reviewJson）显示为未定义，因此很显然我在做完全错误的事情。

任何帮助表示赞赏。

Answer 1

您无法将MVC模型直接绑定到角度模板中-使用service以JSON格式获取数据，然后将值绑定到其@Input装饰器

希望这会有所帮助-编码愉快:)