Je cherche une solution pour transmettre des données json de asp.net mvc 4.5 à un 2 composant angulaire via rasoir @ Html.Raw (Json.Encode (Model))

Question

J'essaie d'afficher des lignes de données sur une page en utilisant Angular 2 , TypeScript et ASP.NET MVC 4.5. J'essaye de livrer le JSON dans un composant angulaire 2, mais je n'ai pas réussi à réussir, et le navigateur ne montre aucune erreur. Est-ce que quelqu'un sait comment retourner des données JSON à partir d'un contrôleur .NET, incorporer dans une vue en utilisant (@ Html.Raw (Json.Encode (Model)), puis passer dans un composant/modèle Angular 2 pour être affiché

Voici ce que j'ai essayé jusqu'ici (construit à partir de divers exemples sur Plunkr et des exemples du site AngularJS.) Je noterai que j'avais un échantillon Angular 2 de base fonctionnant dans la même solution. et les outils sont correctement configurés simplement la difficulté à l'appliquer, j'ai référence à ce Plunk sur ma dernière tentative.. http://plnkr.co/edit/LEtEN9?p=preview

à mon avis:

<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; 
} 

Merci pour votre aide!

Answer 1

En utilisant le lien fourni par yurzui dans les commentaires ainsi que la fonction « hack » par evanplaice ici: https://github.com/angular/angular/issues/6392, je mets ensemble la solution suivante.

Les modifications sont limitées aux 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'); 
    } 
}