在Angular2中，如何將JSON從服務/組件發送到我的HTML組件？

Question

我是Angular2的新手，花了很多時間去修復一件簡單的事情。 正如你所看到的，我只想訪問本地存儲（底層功能，ui()）並將內容發送到View, Register.components.html.我試過各種博客，但每次都失敗。

所以我真的不能發佈錯誤，但我如何才能訪問本地存儲並顯示內容到我的視圖？另外ui()未被調用。我如何稱呼它？

Register.component.ts

import { Component, OnInit } from '@angular/core'; 
import {ValidateService} from '../../services/validate.service'; 
import {AlarmService} from '../../services/alarm.service'; 
import {FlashMessagesService} from 'angular2-flash-messages'; 
import {Router} from '@angular/router'; 

@Component({ 
    selector: 'app-register', 
    templateUrl: './register.component.html', 
    styleUrls: ['./register.component.css'] 
}) 
export class RegisterComponent implements OnInit { 

    hours: String; 
    id: String; 

    constructor(
    private validateService: ValidateService, 
    private FlashMessage: FlashMessagesService, 
    private Router: Router, 
    private AlarmService: AlarmService 
    ){ 
    } 

    ngOnInit() { 

    } 

    onRegisterSubmit(){ 
    var user = { 
     hours: (new Date(this.hours.replace('T', ' ').replace('-', '/'))).valueOf(), 
     id: new Date().getTime(), 
     flag: 0 
    }  

    setTimeout(() => { 
     this.FlashMessage.show('Your alarm has been added.', {cssClass: 'alert-success', timeout: 5000}); 
     }, 10); 

    var storage = localStorage.getItem('users'); 
    var final = []; 
     if (storage == null || typeof(storage) == undefined) 
     { final.push(user); 

     localStorage.setItem('users', JSON.stringify(final)); 
     let time = new Date().getTime() 

     this.AlarmService.setUpAlarms(time); 

     }else{ 
     var get = JSON.parse(localStorage.getItem('users')); 
     var size = Object.keys(get).length; 

     for(var i =0; i< get.length; i++){ 
      final.push(get[i]); 
     } 
     final.push(user); 
     localStorage.setItem('users', JSON.stringify(final));   
     let time = new Date().getTime() 

     this.AlarmService.setUpAlarms(time); 
     }   
    } 

    ui(){ 

     var storage = localStorage.getItem('users'); 

     if (storage == null || typeof(storage) == undefined){ 
     var HERO = localStorage.getItem('users'); 

     } 
     console.log(HERO); 
    const HEROES = HERO 
    } 
} 

這是我的HTML視圖

<form (submit)="onRegisterSubmit()"> 
<div class = "container"> 
    <div class="overlay"> 

    <div id="alarm-dialog"> 
HEKK 
    <h2>Set alarm at</h2> 

    <div class="form-group"> 
     <label class="hours"> 
     <input type="datetime-local" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}T[0-9]{2}:[0-9]{2}" class="form-control" [(ngModel)]="hours" name="hours" value="0" min="0" required/> 
     </label> 
    </div> 
    <a class="close"></a> 
    </div> 

</div> 

    <input type="submit" class="btn btn-primary" value="Set Alarm"> 
</div> 
</form> 

<tr *ngFor="let hero of heroes"> 
       <td>{{hero.hours}}</td> 
</tr> 

Answer 1

如果你想ui()時調用組件的負荷，你可以做到這一點在ngOnInit：

ngOnInit() { 
    this.ui(); 
} 

而且，宣佈heroes作爲您的財產組件，因此它可以被綁定到視圖：

export class RegisterComponent implements OnInit { 
    heroes: any[]; // Maybe add a type instead of "any" 

    // etc 
} 

和修復你的ui方法的位：

ui() { 
    this.heroes = JSON.parse(localStorage.getItem('users')); 
}