在Angular2中,如何将JSON从服务/组件发送到我的HTML组件?

问题描述:

我是Angular2的新手,花了很多时间去修复一件简单的事情。 正如你所看到的,我只想访问本地存储(底层功能,ui())并将内容发送到View, Register.components.html.我试过各种博客,但每次都失败。在Angular2中,如何将JSON从服务/组件发送到我的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> 

如果你想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')); 
} 
+0

三江源弗兰克。但是,我给了什么类型?它作为一个数组返回。那么我添加什么类型?如果我添加String,它只打印Object,object。 –

+0

如果'JSON.parse(localStorage.getItem('users'))'返回一个数组(确认这个!),你应该用'heroes:any []'来确定。如果你已经定义了一个类型,你可以做'英雄:YourType []'。 –

+0

非常感谢你,你救了我。我还有一个问题,可以请你告诉我如何在服务递归中创建函数? –