Javascript 插值在angular2中不起作用

我正在从JSON文件加载数据，并将其结构化到HTML表中。我能够获取数据并对其进行结构化，但问题是它不能反映为HTML表，即插值不起作用。尽管这些变量都有各自的值。

但您得到了一个额外的反勾号，使得整个代码成为一个字符串。把它拿走。将此代码复制粘贴到下面：-

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


 }

---

我已经解决了这个问题，它实际上是订户的“this”实例的一个问题

实际正确的代码是：

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


 }

---

使用箭头函数来保持“this”的上下文完整

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


 }

---

你有一个额外的背勾！！？实际上，我删除了styles数组来简化这个论坛。对不起，可能是在论坛上发布的，这不是问题。你能提供一个示例吗。在Plunkr上。。。因为我不能看到这样的数据，你有可能看到吗？当然，这是我正在获取的数据：[{id:1，type:donut，name:Cake，image:images/0001.jpg，thumbnail:images/thumbnails/0001.jpg}，{id:2，type:gun，name:AK47，image:images/0001.jpg，thumbnails:images/0001.jpg}]使用箭头函数来保持“this”的上下文完整。如下所示：subscribedata=>{this.data=[]；this.data=data；this.heads=Object.keysdata[0]；var len=this.heads.length；console.logthis.heads；}，err=>console.logerr，=>console.log'Completed'；这对它没有任何影响，我想它们只是两种不同的写作风格。

reloadData() {
            this._spservice.fetchData()
                .subscribe((data) => {
                    this.data = [];
                    this.data = data;
                    this.heads = Object.keys(data[0]);
                    var len = this.heads.length;
                    console.log(this.heads);
                },
                err => console.log(err),
                () => console.log('Completed'));
        }