Question

所以我使用Angular CLI。我想在本地存储中保存电子邮件。我的HTML代码：

<input type="text" name="email_field" id="email"> 
<input type="submit" value="registration" onclick="save_email()">

我的类型脚本代码：

function save_email(){
    let idemail = document.getElementById('email');
    localStorage.setItem('email', this.idemail.value);
}

单击按钮后，此组件关闭，没有任何存储空间。如何解决？

Answer 1

首先，请勿拨打onclick，而应使用(click)角度。其次，不要尝试从dom中获取数据，而是使用NgModel绑定。

https://stackblitz.com/edit/angular-ah8fst

Answer 2

将Angular Forms用于此类内容总是好得多。

<强>模板

<form #f="ngForm" [ngFormOptions]="{updateOn: 'blur'}" novalidate>
    <label>
    <span>Email</span>
    <input
      type="email"
      name="email"
      ngModel
      placeholder="Your email">
  </label>
    <label>
    <span>Age</span>
    <input
      type="number"
      name="age"
      ngModel
      placeholder="age">
  </label>
  <button type="submit" (click)="submit(f.value)">Submit</button>
</form>

<强>组件

  submit(value){
    console.log(value);
    localStorage.setItem('data',JSON.stringify(value));
  }

相同link

的工作示例

有关template-driven和data-driven的更多内容，表示Angular

在本地存储angular-cli中保存电子邮件

2 个答案: