Angular2如何在HTML5模板中显示本地存储值？

我在localStorage中存储了2个密钥，我想在我的模板中显示其中一个密钥。我无法访问这些值。我甚至创建了一个接口来存储localStorage中currentUser密钥的值。该如何实施

以下是当前代码：

服务

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Md5 } from 'ts-md5/dist/md5';

import { User } from './user';
import 'rxjs/add/operator/map';

@Injectable()
export class VehicleService {
    private defUrl = 'dummy-url.com';

    constructor(private http: Http) { }
    getVehicle(username?: string, password?: string) {
        const url = (!username || !password) ? this.defUrl : 'dummy-url.com' + username + '/' + Md5.hashStr(password);
        return this.http.get(url)
            .map(res => res.json());
    }

    parseUser(): any {
        return JSON.parse(localStorage.getItem('parseUser'));
    }

    getUser(): any {
        return localStorage.getItem('currentUser');
    }
}

登录组件

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { Location } from '@angular/common';
import { Router } from "@angular/router"

import { VehicleService } from './vehicle.service';
import { User } from './user';

@Component({
    selector: 'login',
    templateUrl: './login.html',
    providers: [VehicleService]
})
export class LoginComponent implements OnInit {
    public user: FormGroup;

    ngOnInit() {
        this.user = new FormGroup({
            username: new FormControl('', Validators.required),
            password: new FormControl('', Validators.required)
        });
    }

    constructor(public vehicleService: VehicleService, private location: Location, private router: Router) {
    }

    onSubmit(user) {
        this.vehicleService
            .getVehicle(user.value.username, user.value.password)
            .subscribe(user => {
                this.user = user;
                localStorage.setItem('parseUser', JSON.stringify(this.user));
                this.router.navigate(['/vehicle']);
                console.log('submit');
            });
        localStorage.setItem('currentUser', user.value.username);
    }

    goBack(): void {
        console.log("Back button");
        this.location.back();
    }
}

import { Component, enableProdMode, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup } from '@angular/forms';

import { VehicleService } from './vehicle.service';
import { User } from './user';
import { LoginComponent } from './login.component';

enableProdMode();

@Component({
  selector: 'vehicle-json',
  templateUrl: './vehicle.html',
  providers: [VehicleService]
})
export class VehicleComponent implements OnDestroy {
  public vehicles: GeneralVehicle[];
  public currUser: CurrentUser;

  ngOnDestroy() {
    localStorage.removeItem('currentUser');
  }


  constructor(private vehicleService: VehicleService, private router: Router) {
    this.vehicleService.getVehicle().subscribe(vehicle => {
      this.vehicles = vehicle;
      this.vehicles = this.vehicleService.parseUser();
      //this.vehicles = this.vehicleService.parseUser();
    });
    let currUser = this.vehicleService.getUser();
  }

  toLogin(): void {
    console.log("toLogin button");
    this.router.navigate(['/login']);
    localStorage.removeItem('parseUser');
    localStorage.removeItem('currentUser');
  }

}

interface GeneralVehicle {
  status: number;
  dallases: Vehicle[];
}

interface Vehicle {
  vehicle_id: number;
  dallassettings: string;
  dallasupdated: string;
  dallas_list: DallasList[];
}

interface DallasList {
  number: number;
  auth: number;
}

interface CurrentUser {
  usr: string;
}

车辆部件

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { Location } from '@angular/common';
import { Router } from "@angular/router"

import { VehicleService } from './vehicle.service';
import { User } from './user';

@Component({
    selector: 'login',
    templateUrl: './login.html',
    providers: [VehicleService]
})
export class LoginComponent implements OnInit {
    public user: FormGroup;

    ngOnInit() {
        this.user = new FormGroup({
            username: new FormControl('', Validators.required),
            password: new FormControl('', Validators.required)
        });
    }

    constructor(public vehicleService: VehicleService, private location: Location, private router: Router) {
    }

    onSubmit(user) {
        this.vehicleService
            .getVehicle(user.value.username, user.value.password)
            .subscribe(user => {
                this.user = user;
                localStorage.setItem('parseUser', JSON.stringify(this.user));
                this.router.navigate(['/vehicle']);
                console.log('submit');
            });
        localStorage.setItem('currentUser', user.value.username);
    }

    goBack(): void {
        console.log("Back button");
        this.location.back();
    }
}

import { Component, enableProdMode, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup } from '@angular/forms';

import { VehicleService } from './vehicle.service';
import { User } from './user';
import { LoginComponent } from './login.component';

enableProdMode();

@Component({
  selector: 'vehicle-json',
  templateUrl: './vehicle.html',
  providers: [VehicleService]
})
export class VehicleComponent implements OnDestroy {
  public vehicles: GeneralVehicle[];
  public currUser: CurrentUser;

  ngOnDestroy() {
    localStorage.removeItem('currentUser');
  }


  constructor(private vehicleService: VehicleService, private router: Router) {
    this.vehicleService.getVehicle().subscribe(vehicle => {
      this.vehicles = vehicle;
      this.vehicles = this.vehicleService.parseUser();
      //this.vehicles = this.vehicleService.parseUser();
    });
    let currUser = this.vehicleService.getUser();
  }

  toLogin(): void {
    console.log("toLogin button");
    this.router.navigate(['/login']);
    localStorage.removeItem('parseUser');
    localStorage.removeItem('currentUser');
  }

}

interface GeneralVehicle {
  status: number;
  dallases: Vehicle[];
}

interface Vehicle {
  vehicle_id: number;
  dallassettings: string;
  dallasupdated: string;
  dallas_list: DallasList[];
}

interface DallasList {
  number: number;
  auth: number;
}

interface CurrentUser {
  usr: string;
}

模板：vehicle.html

<button class="btn btn-default" type="button" (click)="toLogin()">Login</button>
<div *ngIf="vehicles">
    <b>Status: {{vehicles?.status}} for user: DISPLAY-USER-HERE</b>
    <div class="list-group" *ngFor="let vehicle of vehicles.dallases" id="d1">
        <a class="list-group-item">
            <h4 class="list-group-item-heading" id="l1">Vehicle ID: {{vehicle.vehicle_id}}</h4>
        </a>
        <a class="list-group-item">
            <h4 class="list-group-item-heading">Dallas settings: {{vehicle.dallassettings}}</h4>
        </a>
        <a class="list-group-item">
            <h4 class="list-group-item-heading">Dallas updated: {{vehicle.dallasupdated}}</h4>
        </a>
        <a class="list-group-item">
            <h4 class="list-group-item-heading">Dallas list:</h4>
            <p class="list-group-item-text" *ngFor="let d of vehicle.dallas_list">
                <b>Number:</b> {{d.number}}<br>
                <b>Auth:</b> {{d.auth}}</p>
        </a>
    </div>
</div>

登录
状态：{vehicles？.Status}}用户：DISPLAY-user-HERE
车辆ID:{Vehicle.Vehicle\u ID}
达拉斯设置：{vehicle.dallassettings}
达拉斯更新：{vehicle.dallasupdated}
达拉斯名单：

编号：{{d.Number}}

Auth:{d.Auth}

您可以使用getter从localStorage获取值，并将其显示在模板中。在模板的组件类中像下面那样定义它

get user(): any {
    return localStorage.getItem('currentUser');
}

在您的模板中：

<b>Status: {{vehicles?.status}} for user: {{user}}</b>

状态：{{vehicles？.Status}}用户：{{{user}

您必须在一个组件中设置项，并在任何需要的地方获取项。您可以在登录组件中设置项目，并在车辆组件中获取项目

var user = localstorage.getitem('currentuser');

在组件文件中

---

在模板中：

{{user}}

如果不是单个字符串，首先认为这是一个json字符串。好吗

---

users=localStorage.getItem（'currentUser'）？parse（localStorage.getItem（'currentUser'））：[]您试图访问my
车辆组件中的
currentUser
的位置/方式：
让currUser=this.vehicleService.getUser（）-这里我试图传递
currentUser
键的值，然后我试图在
vehicle.html
模板中显示它，我在这里写了
display-USER-here
。你知道
让
创建一个局部变量，对吗？您需要将其分配给一个字段；比如
this.currUser=this.vehicleService.getUser（）我用Sabbir Rahman的建议解决了这个问题，但是谢谢你的时间，我对这门语言还不熟悉，还在学习新的东西。我想怎么做就怎么做！谢谢你抽出时间。