サービスから返されたデータが角2のコンポーネントに表示されない

Question

サービスを呼び出し、データを返すコンポーネントがあります（図を参照）。データはHTMLページに表示されません。私は何を取りこぼしたか？ので、任意のヘルプは大幅に

ルートコンポーネントを理解されるであろう角度2に新規roots配列は配列の配列として戻って来ているが、データは正確であると私はHTMLが正しいと信じても

。

export class RootsComponent implements OnInit { 
    private baseRootEndpoint: string = 'http://localhost:59534/api/admin'; 

    private isUploadBtn: boolean = true; 
    private dbops: number = 0; 
    private msg: string = ''; 
    private dataForm: FormGroup; 
    private imageData; 
    private contentType; 
    private fileLength; 
    public roots: Root[]; 
    private isLoading = true; 
    @Input() root: Root; 

    constructor(private http: Http, private _rootService : RootService, fb:FormBuilder) { 
    } 

    ngOnInit() { 
     this.roots = []; 
     this.getRoots(); 
    } 

    //call the service and bring back a list of roots 

    getRoots() { 
     debugger; 
     var me = this; 
     this._rootService.get(this.baseRootEndpoint).subscribe(
      data => me.roots.push(JSON.parse(data._body)), 
      error => me.msg = error 
     ); 
     this.isLoading = false; 
    } 
} 

//simple service 
@Injectable() 
export class RootService { 
    constructor(private _http: Http) { } 



    get(url: string): Observable<any> { 
     debugger; 
     return this._http.get(url); 

    } 
} 

<div class="container-fluid"> 
    <div class="row"> 
     <div class="header"> 
      <h4 class="title">&nbsp;&nbsp; Roots</h4> 
     </div> 

     <div class="col-lg-10 col-lg-offset-1" *ngIf="!isLoading"> 
      <table> 
       <thead> 
        <tr> 
         <th>Root Name</th> 
         <th>Root</th> 
         <th>Definition</th>       
        </tr> 
       </thead> 
       <tbody> 
        <tr *ngFor="let root of roots[0]" let id="index"> 
         <td>{{root.DescriptiveName}}</td> 
         <td><img src="{{root.Root}}" name="rootImage" /></td> 
         <td></td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
    </div> 
</div> 

Answer 1

ので、角2/4に、我々はコンポーネントは、それがサービスにそれほど変更されます知っているように観測して仕事をしなければならない：

roots: Observable<Array<Root>>; 
getRoots() { 
    debugger; 
    var me = this; 
    this._rootService.get(this.baseRootEndpoint).subscribe(
     data => me.roots = (JSON.parse(data._body)), 
     error => me.msg = error 
    ); 
    this.isLoading = false; 
} 

次に、あなたのHTMLに：

*ngFor="let root of roots | async" 

この非同期フラグは、非同期パイプを使用しないようにするために、オブジェクティブに存在するオブザーバブルを解決することを意味します.ngOnInitの変数をサブスクライブして別のアレイに出力させることができます

問題がある場合は、私に連絡すること自由に感じてください:)幸運を！

PS：JSON出力を表示し、エラーが発生したかどうかを教えてください。