Angular2, Wie die Anzeige localStorage-Wert in HTML5 template?

Speicher ich 2 Schlüssel im localStorage und ich möchte die Anzeige einer von Ihnen, der in meine Vorlage. Ich kann nicht auf diese Werte. Ich habe sogar ein interface geschaffen, nur um den Wert zu speichern der currentUser-Schlüssel von localStorage. Wie soll das umsetzen?

Hier der aktuelle code:

Service

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

Login-Komponente

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

Fahrzeug Komponente

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

Vorlage: 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>

InformationsquelleAutor Haseoh | 2017-02-07