jsonデータをasp.net mvc 4.5からrazor @ Html.Raw（Json.Encode（Model））経由で2角形に渡す方法を探しています

Question

角度2を使用してページにデータの行を表示しようとしています、TypeScript、およびASP.NET MVC 4.5です。 JSONをAngular 2コンポーネントに配信しようとしていますが、成功できず、ブラウザにエラーが表示されていません。

@Html.Raw（Json.Encode（Model））を使用してビューに埋め込んだ後、Angular 2コンポーネント/テンプレートに渡して表示するために、.NETコントローラからJSONデータを戻す方法を知っている人はいますか？

Plunkrのさまざまな例とAngularJSサイトの例から作成したものですが、私は同じソリューションで動作する基本的なAngular 2サンプルを持っていたので、フレームワークそしてツールは、設定が正しくされている私は私の最新の試みで、このplunkを参照してきただけでそれを適用する難しさを持つ：。。私の見解ではhttp://plnkr.co/edit/LEtEN9?p=preview

：

<my-app holdings="@Html.Raw(Json.Encode(Model))">Loading...</my-app> 

main.ts：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './boot'; 
const platform = platformBrowserDynamic(); 
platform.bootstrapModule(AppModule); 

boot.ts：

///<reference path="./../typings/globals/core-js/index.d.ts"/> 
import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app'; 

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

app.ts：

import { Component, Input } from '@angular/core'; 
@Component({ 
    selector: 'my-app', 
    template: `  
    <ul> 
     <li *ngFor="let report of holdings"> 
     {{ report.CorpName }} 
     </li> 
    </ul> 
    ` 
}) 
export class AppComponent { 
    @Input() holdings: any; 
} 

あなたの助けをありがとう！コメントでyurzuiによって提供されたリンクだけでなく、ここにevanplaiceによって機能を「ハック」を使用

Answer 1

：https://github.com/angular/angular/issues/6392は、私は次の解決策をまとめます。

変更はapp.tsに制限されています。

app.ts：

import { Component, Input, ElementRef } from '@angular/core'; 
@Component({ 
    selector: 'my-app', 
    template: ` 
    <ul> 
     <li *ngFor="let report of hack(holdings)"> 
     {{ report.CorpName }} 
     </li> 
    </ul> 
    ` 
}) 
export class AppComponent { 

    hack(val) { 
     console.log('Before:'); 
     console.log(val); 
     val = JSON.parse(val); 
     console.log('After:'); 
     console.log(val); 
     return val; 
    } 

    @Input() holdings: any; 

    constructor(elm: ElementRef) { 
     this.holdings = elm.nativeElement.getAttribute('holdings'); 
    } 
}