Angular2では、service/componentから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 
    } 
} 

これは、あなたがui()のときに、コンポーネントのロードと呼ばれたい場合は、ngOnInitでそれを行うことができ、私の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

です：

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