Question

我对角度很新，我正在尝试制作一个允许用户更改密码的表单。为此，我需要从login.config中读取有关用户的信息，这是我的问题，因为我不知道如何读取文件或如何通过角度对此文件进行更改。有人有什么建议吗？

html：

 <form class="form" method="post" #optionsForm="ngForm" (ngSubmit)="onSubmit(optionsForm)">
     <h2 >Change password</h2>
     <div >
      <label>Old Password </label>
      <input type="password" name="lass="form-input" ngModel>
      </div>
      <div>
          <label>New Password </label>
          <input type="password" name="new-password" id="new-password-input" 
           required ngModel>
     </div>
     <div class="form-row">
           <label> Repeat new password</label>
           <input type="password" name="repeat-password" id="repeat"ngModel>
    </div>
    <div class="form-row form-row-center">
       <input type="submit" id="save-changes" value=" Submit"/>
  </div>
  </form>

component.ts：

import {Component, OnInit} from '@angular/core';
import {Headers, Http} from '@angular/http';
import 'rxjs/add/operator/toPromise';
import {NgForm} from '@angular/forms';


  @Component({    ...  })
  export class OptionsComponent implements OnInit {
  constructor(private http: Http) {};
  onSubmit(form: NgForm): void {

    //read password from login.config 
    // write new password in login.config

    form.resetForm();

   }

   }

login.config中：

    username: user@mail.com
    password: 1234

Answer 1

我建议你创建一个包含以下内容的服务

 private extractData(res: Response) {
    if (res.status < 200 || res.status >= 300) {
      throw new Error('Bad response status: ' + res.status);
    }
    let body = res.json ? res.json() : null;
    return (body && body.data || {});
  }

getData() {
       return <Observable>this.http
      .get(jsonFileUrl)
      .map(res => this.extractData(res));
  }

然后在组件中注入服务并调用getData方法

constructor(public dataService: myService ) { }

  getData() {
    this.dataService.getData().subscribe( data => {
      // here you can use the login data
    });

希望这会有所帮助

更改密码表单并保存对login.config的更改

1 个答案: