插值不适用于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

请改用箭头函数以保持“ 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'));
        }

Answer 2

您有一个额外的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 3

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

实际的正确代码是：

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


 }