使用 Angular 8 中的 put 调用更新本地 JSON 文件的单个属性 [英] Update a single property of local JSON file using put call in Angular 8

问题描述

我想更新我放置在我的资产文件夹中的 JSON 文件，所以如果我只更新我的 JSON 对象的一个​​属性，那么它应该只更新该属性，而不影响任何其他属性值:

让示例代码为:

登录界面.ts

导出接口 loginModel {电子邮件:字符串；密码:字符串；}

登录.component.ts

import { Component, OnInit } from '@angular/core';从 'rxjs' 导入 { Observable };从@angular/common/http"导入 { HttpClient }从'./loginModel'导入{登录模型}@成分({选择器:'应用程序登录'，templateUrl: './login.component.html',styleUrls: ['./login.component.css']})导出类 LoginComponent 实现 OnInit {private _jsonURL = 'assets/Login.json';私人登录:Array;构造函数(私有 http: HttpClient) {this.login = new Array();}ngOnInit() {this.getLoginData();}获取登录数据(){this.http.get(this._jsonURL).subscribe(data => {this.login = 数据；console.log(this.login);返回 this.login;});}更新登录数据(){//如何继续这个??}}

login.component.html

{{log.Email}}<input [ngModel]="log.Password">
<button(点击)="UpdateLoginData()">更新</button>

这只是一个例子.

因此，如果我在一个地方更改密码并单击更新按钮，那么它应该仅更新该特定电子邮件的密码，并且我不想为了更新单个值而用新的 JSON 对象替换整个文件，这可能吗?

解决方案

仅使用 angular 框架无法进行任何文件操作.您需要服务器端实现来实现这一点.如果您不熟悉服务器端编程，您可以尝试使用 in memory angular database api.

https://www.npmjs.com/package/angular-in-memory-web-api

I want to update my JSON file which I have placed in my assets folder, so If I am updating just one property of my JSON object so it should update that property only, without affecting any other properties value:

Let the sample code be :

loginInterface.ts

export interface loginModel {
    Email: string;
    Password: string;
}

login.component.ts

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http'
import { loginModel } from './loginModel'

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {


  private _jsonURL = 'assets/Login.json';
  private login: Array<loginModel>;

constructor(
    private http: HttpClient) {
    this.login = new Array<loginModel>();
  }
ngOnInit() {
    this.getLoginData();
  }

  getLoginData() {
    this.http.get<loginModel[]>(this._jsonURL).subscribe(data => {
      this.login = data;
      console.log(this.login);
      return this.login;
    });
  }

UpdateLoginData() {
// How to proceed on this one??
  }
}

login.component.html

<div *ngFor = "let log of login">
    {{log.Email}} 
    <input [ngModel]="log.Password">
</div>
<button (click)="UpdateLoginData()">Update</button>

This is just an example.

So if I am changing password at one place and clicking on update button , then it should update password of that specific Email only and I don't want to replace the whole file with new JSON object just for updating a single value, is this possible?

解决方案

You can't do any file operation using just angular framework. You need server side implementation to achieve this. If you are not familiar with server side programming you can try using in memory angular database api.

https://www.npmjs.com/package/angular-in-memory-web-api

这篇关于使用 Angular 8 中的 put 调用更新本地 JSON 文件的单个属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！