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

如果您希望在加载组件时调用String t1 = "Hello"; String t2 = t2.getText(); // t2 will now have whatever t1 was saved with.，则可以在ui()中执行此操作：

ngOnInit

另外，将ngOnInit() { this.ui(); }声明为组件的属性，以便绑定到视图：

heroes

稍微修正一下export class RegisterComponent implements OnInit { heroes: any[]; // Maybe add a type instead of "any" // etc }方法：

ui

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

1 个答案: