Question

我在angular2上编写简单的身份验证系统我的问题是我的主Navbar数据更改但不在视图中，因为我在主渲染器中的HEADER

登录逻辑

＆＃13;

import { Component, OnInit, ElementRef } from '@angular/core';
import { Router } from '@angular/router';

import { AuthenticationService } from '../_services/authentication.service';
import { UserService } from '../_services/user.service';
import { User } from '../_models/user';

declare var jQuery: any;
declare var popupAc: any;

@Component({
    selector: 'as-giris',
    templateUrl: 'login.component.html',
    styleUrls: ['login.component.css']
})

export class LoginComponent implements OnInit {
    model: any = {};
    error = '';
    users: User[] = [];

    constructor(
        private router: Router,
        private authenticationService: AuthenticationService,
        private _elRef: ElementRef,
        private userService: UserService) {
        }

    ngOnInit() {
        this.authenticationService.logout();
        jQuery('.form-control').keypress(function(){
            jQuery('.log-status').removeClass('wrong-entry');
        });
    }

    login() {
        this.authenticationService.login(this.model.username, this.model.password)
            .subscribe(result => {
                if (result === true) {
                    this.userService.getUsers()
                        .subscribe(users => {
                            this.users = users;
                    });
                    this.router.navigate(['/']);
                } else {
                    jQuery('.log-status').addClass('wrong-entry');
                    jQuery('.alert').fadeIn(500);
                       setTimeout( "$('.alert').fadeOut(1500);",3000 );
                }
            });
    }

}

＆＃13;

获取数据的用户服务

＆＃13;

getUsers(): Observable<User[]> {
        // Authorization Tokeni Ayarlanıyor
        let headers = new Headers({ 'Authorization': this.authenticationService.token });
        let options = new RequestOptions({ headers: headers });
        // Kullanıcı Headeri Gönderiliyor
        return this.http.get('http://localhost/Hesap/Detay', options)
            .map((response: Response) => 
                response.json().detay
         ); 
    }

＆＃13;

Navbar Logic

＆＃13;

import { Component, OnInit, Input } from '@angular/core';
import { Observable } from 'rxjs/Observable';

import { AuthenticationService } from '../../_services/authentication.service';
import { User } from '../../_models/user';
import { UserService } from '../../_services/user.service';

import { Router } from '@angular/router';

@Component({
    selector: 'as-navbar',
    templateUrl: './navbar.html',
	styleUrls: ['navbar.component.css'],
	providers: [AuthenticationService, UserService]
})
export class NavbarComponent implements OnInit {
	@Input() isLoggedIn: any;
	@Input() users: User[];
	constructor(private router: Router, 
				private userService: UserService,
				private authenticationService: AuthenticationService){
	}
	
	ngOnInit() {
		console.log(this.users);
	}

	ngDoCheck() {

	}

	logOut(){
		this.router.navigate(['/']);
	}
}

＆＃13;

我可以编写控制台记录此用户数据，但我无法刷新导航栏视图

＆＃13;

<div *ngIf="isLoggedIn" class="profile-nav">
                    <div class="profile-nav-text">
                        <div class="profile-nav-text-name">
                            Hoşgeldiniz {{users.KullaniciAdi}}
                        </div>
                        <div class="profile-nav-text-job">
                            Krediniz : {{users.Kredi | number:'1.2-2'}} TL
                        </div>
                    </div>
                <div class="profile-nav-pic">
                    <img src="https://i1.sndcdn.com/avatars-000245527464-i1i2a3-large.jpg">
                </div>
            </div>
            <a *ngIf="isLoggedIn" class="openRightSidebar"><p style="color: #fff200;margin: -3px 0 10px;">ONLİNE İŞLEMLER<i class="material-icons">apps</i></p></a>
		    <div class="col-md-12" *ngIf="!isLoggedIn" style="padding-right: 0px;">
		    <ul class="nav-actions" style="margin: 20px 0 0 0;">
		        <li>
		            <i style="color: #f2cc10;" class="fa fa-user-plus" aria-hidden="true"></i>
		            <a class="topup_bill">YENİ ÜYELİK</a>
		        </li>
		        <li>
		            <i style="color: #fff;" class="fa fa-user" aria-hidden="true"></i>
		            <a routerLink="/giris" class="topup_bill" style="color: #fff;">GİRİŞ</a>
		        </li>
          </ul>
    	</div>

＆＃13;

我在路由器插座中的登录组件中创建获取数据逻辑可能有问题吗？因为我的导航栏内联主要html通过路由器插座

<as-navbar></as-navbar>
<router-outlet></router-outlet>
<as-footer></as-footer>

模型数据更改但视图仍然相同Angular2

0 个答案: