How to display json object parameters in angular 2

2020-03-30 05:42发布

I am trying to display Object in template . In console Users.email is working but in template its not working. Is it mandatory to define type of Users object. how to handle response properly.In console data is shown as object of users from which I am taking first object as data[0].

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

1条回答
家丑人穷心不美
2楼-- · 2020-03-30 05:59

Your using Observables so the data will be little delay in time so you need to type safe opertaor ? as below

<h2>Welcome, {{ Users?.email }}</h2>
查看更多
登录 后发表回答