angular2で補間が機能しない

Question

import {Component} from 'angular2/core'; 
import {Observable} from 'rxjs/Observable'; 
import {Http} from 'angular2/http'; 
import {SpsheetService} from './spsheet.service'; 
import 'rxjs/Rx'; 


@Component({ 
selector: 'my-spsheet', 
template: ` 
      <button id="fetch" (click)="reloadData()">Reload Data</button> 
      <table class="table"> 
      <thead> 
       <tr> 
        <th *ngFor="#head of heads"> 
         {{head | async}} 
        </th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr *ngFor="#dat of data"> 
        <td *ngFor="#head of heads" contenteditable="true"> 
         {{dat.head | async}} 
        </td> 
       </tr> 
      </tbody> 
     </table> 
     `, 
providers: [SpsheetService] 
}) 

export class SpsheetComponent { 
    data:any[]; 
    heads:string[]; 
    otherdata:string[]; 
    constructor(private _http:Http,private _spservice:SpsheetService){} 

    reloadData(){ 
     this._spservice.fetchData() 
      .subscribe(function(data) 
      { 
       var me =this; 
       me.data =[]; 
       me.data = data; 
       me.heads = Object.keys(data[0]); 
       var len = me.heads.length; 
       console.log(me.heads); 

      }, 
      err => console.log(err), 
      () => console.log('Completed')); 
    } 


} 

JSONファイルからデータを読み込み、HTMLテーブルに構造化しています。私はデータをフェッチすることもできるし、構造も問題ですが、HTMLテーブルとして反映されません。補間は機能しません。変数にはそれぞれの値が入っていますが。

Answer 1

コード全体が文字列になっている余分なBackTickがあります。それを取り除くだけです。コピーは、以下のコードを貼り付けます - 私はそれのまわりで働いている

import {Component} from 'angular2/core'; 
import {Observable} from 'rxjs/Observable'; 
import {Http} from 'angular2/http'; 
import {SpsheetService} from './spsheet.service'; 
import 'rxjs/Rx'; 


@Component({ 
selector: 'my-spsheet', 
template: ` 
      <button id="fetch" (click)="reloadData()">Reload Data</button> 
      <table class="table"> 
      <thead> 
       <tr> 
        <th *ngFor="#head of heads"> 
         {{head | async}} 
        </th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr *ngFor="#dat of data"> 
        <td *ngFor="#head of heads" contenteditable="true"> 
         {{dat.head | async}} 
        </td> 
       </tr> 
      </tbody> 
     </table> 
     `, 
], 
providers: [SpsheetService] 
}) 

export class SpsheetComponent { 
    data:any[]; 
    heads:string[]; 
    otherdata:string[]; 
    constructor(private _http:Http,private _spservice:SpsheetService){} 

    reloadData(){ 
     this._spservice.fetchData() 
      .subscribe(function(data) 
      { 
       var me =this; 
       me.data =[]; 
       me.data = data; 
       me.heads = Object.keys(data[0]); 
       var len = me.heads.length; 
       console.log(me.heads); 

      }, 
      err => console.log(err), 
      () => console.log('Completed')); 
    } 


} 

Answer 2

を、それが実際に加入者の「この」インスタンスの問題でした。

実際の正しいコードは次のとおりです。

import {Component} from 'angular2/core'; 
import {Observable} from 'rxjs/Observable'; 
import {Http} from 'angular2/http'; 
import {SpsheetService} from './spsheet.service'; 
import 'rxjs/Rx'; 


@Component({ 
selector: 'my-spsheet', 
template: ` 
      <button id="fetch" (click)="reloadData()">Reload Data</button> 
      <table class="table"> 
      <thead> 
       <tr> 
        <th *ngFor="#head of heads"> 
         {{head}} 
        </th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr *ngFor="#dat of data"> 
        <td *ngFor="#head of heads" contenteditable="true"> 
         {{dat[head]}} 
        </td> 
       </tr> 
      </tbody> 
     </table> 
     `, 
providers: [SpsheetService] 
}) 

export class SpsheetComponent { 
    data:any[]; 
    heads:string[]; 
    otherdata:string[]; 
    constructor(private _http:Http,private _spservice:SpsheetService){} 

    reloadData(){ 
     var me =this; 
     me._spservice.fetchData() 
      .subscribe(function(data) 
      { 
       me.data =[]; 
       me.data = data; 
       me.heads = Object.keys(data[0]); 
       var len = me.heads.length; 
       console.log(me.heads); 

      }, 
      err => console.log(err), 
      () => console.log('Completed')); 
    } 


} 

Answer 3

使用の矢印の機能の代わりにそのままthisのコンテキストを維持します。