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