插值不適用於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'));
    }


 }