Как передать массив JSON в шаблон Angular2 с помощью @Input из ASP.NET MVC View?

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 с угловым шаблоном - извлеките данные как JSON, используя service, а затем привяжите значение к его @Input декоратору

Надеюсь, это поможет - счастливое кодирование:)