2017-04-05 111 views
1

我想顯示模板中的對象。在控制檯Users.email正在工作,但在模板中不起作用。是否需要定義用戶類型的對象。如何正確處理響應。控制檯數據顯示爲用戶的對象,我將其作爲第一個對象作爲數據[0]。如何顯示json對象參數的角2模板打印稿

import { Component, OnInit } from '@angular/core'; 
import { Router } from '@angular/router'; 
import { AuthenticationService } from './services/authentication.service'; 
import { EmployeeService }  from './services/emplyee.service'; 

@Component({ 
    template: `<h2>Welcome, {{ Users.email }}</h2> 
    <button class="btn btn-info bg-blue bg-darken-2 mt-1 min-width-150" (click)="logout()"><i class="icon-unlock2"></i> 
     Logout 
    </button>`, 
}) 
export class homeComponent implements OnInit { 

    Users: any; 

    constructor(private authenticationService: AuthenticationService, 
       private router: Router, private 
       emplyeeService: EmployeeService) { 
    } 

    ngOnInit() { 
     if (!localStorage.getItem('currentUser')) { 
      this.router.navigate(['/']); 
      console.log("Go Login"); 
     } else { 
      this.getUsers(); 
     } 
    } 

    logout() { 

     this.authenticationService.logout(); 
     this.router.navigate(['/']); 
    } 

    getUsers() { 
     this.emplyeeService.getAll() 
      .subscribe(
       (data: any) => { 
        console.log(data); 
        this.Users = data[0]; 
        console.log(this.Users.email); 
       }, 
       (error) => console.log(error) 
      ); 
    } 
} 
+0

旁註類型安全的數據將在時間上幾乎沒有延遲。在TypeScript(和JavaScript)中使用camelCase作爲局部變量和字段名稱是慣例。並將PascalCase用於類和類型。所以用戶 - >用戶。 – Hampus

回答

1

你使用觀測量所以,所以你需要opertaor ?如下

<h2>Welcome, {{ Users?.email }}</h2> 
+0

有沒有其他解決方案?像我必須定義用戶對象的類型? – Vivek

+0

是的。你必須定義一個模型。然後在你的組件中使用它 – Aravind