在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>

来源

2017-05-04 Dinesh Gupta

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

来源

2017-05-04 15:41:33

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

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

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

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

回答

相关问题