javascript - 插值在 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 表中。我能够获取数据并构建它，但问题是它不会反射(reflect)为 HTML 表格，即插值不起作用。尽管变量带有各自的值。

Answer 1

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

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