在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'));
}
三江源弗兰克。但是,我给了什么类型?它作为一个数组返回。那么我添加什么类型?如果我添加String,它只打印Object,object。 –
如果'JSON.parse(localStorage.getItem('users'))'返回一个数组(确认这个!),你应该用'heroes:any []'来确定。如果你已经定义了一个类型,你可以做'英雄:YourType []'。 –
非常感谢你,你救了我。我还有一个问题,可以请你告诉我如何在服务递归中创建函数? –