Question

import {Component, EventEmitter, Input, OnChanges,OnInit} from '@angular/core';
import {Observable} from 'rxjs/Rx';
import {Router} from '@angular/router';
import { LoginService } from '../../login/services/login.service';
import {User,SharedService} from '../../SharedService'
@Component({
    selector: 'dashboard',
    template: `
    <div class="container">
        <div class="row">
            <div class="col-md-10 col-md-offset-1">
                <div class="panel panel-default">
                    <div class="panel-heading">Dashboard</div>

                    <div class="panel-body">
                        You are logged in! <span>{{ this.user.email }} </span>

                    </div>
                </div>
            </div>
        </div>
    </div>
 `
})
export class LogsComponent {

 user:User;

 constructor(ss:SharedService){
   this.user=ss.getUserDetail();
 }



}

因为即时通讯使用laravel及其{{}}像temp的模板我需要在角度和传递数据中创建模板。我想要的是在我的模板中显示来自this.user.email的模板数据。任何建议我怎么能这样做？现在它是空白的..但是当我在console log this.user中显示时，我得到了用户的对象。

当我console.log(this.user)得到这个时：

object isLoggedIn: trueuser: Object created_at: "2017-03-14 09:04:42"email: "user@user.com"id: 4name: "user"updated_at: "2017-03-14 09:04:42"__proto__: Object__proto__: Object

但是当我这样做时：console.log(this.user.email)我未定义。

这是我的sharedService：

import {Component, Injectable } from '@angular/core';

export class User{
 email:string;
 name:string;
}

@Injectable()
export class SharedService{
  user:User;
  setUserDetail(res){
   this.user=res;
  }
  getUserDetail(){
    return this.user;
  }
}

Answer 1

如果您返回JSON，请确保返回一个有所不同的数组或JSON，确保使用方法res.JSON（）将您的响应转换为JSON 如果你返回对象的数组然后它显示显示，你看到它像一个数组...

//这是你的服务

     getHeroes(): Promise<Hero[]> {
    return Promise.resolve(HEROES);
  }

//这是你如何访问数据

heroes: Hero[];
  constructor (private heroService: HeroService) {}
  ngOnInit() { this.getHeroes(); }
  getHeroes() {
    this.heroService.getHeroes()
                     .subscribe(
                       heroes => this.heroes = heroes,
                       error =>  this.errorMessage = <any>error);
  }

如何在角度2中传递模板中的数据？

1 个答案: