Javascript 在Angular 8中使用put调用更新本地JSON文件的单个属性

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

让示例代码为：

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??
  }
}

从'@angular/core'导入{Component，OnInit}；
从“rxjs”导入{Observable}；
从“@angular/common/http”导入{HttpClient}
从“/loginModel”导入{loginModel}
@组成部分({
选择器：“应用程序登录”，
templateUrl:'./login.component.html'，
样式URL:['./login.component.css']
})
导出类LoginComponent实现OnInit{
private _jsonURL='assets/Login.json'；
私有登录：数组；
建造师(
专用http:HttpClient）{
this.login=新数组（）；
}
恩戈尼尼特（）{
这是getloginda（）；
}
GetLoginda（）{
this.http.get（this.\u jsonURL）.subscribe（数据=>{
this.login=数据；
console.log（this.login）；
返回此.login；
});
}
UpdateLoginData（）{
//如何处理这一问题？？
}
}

login.component.html

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

{{log.Email}
更新

这只是一个例子

---

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

您不能通过angular直接更改JSON文件的内容，您需要后端来反映JSON文件上的更改。

否！不能使用“角度”更改文件的内容。它是一个文件I/O操作，由具有文件系统API的后端框架/语言（例如Node.JS）处理。您可以创建一个RESTful API来修改文件内容，并从Angular发出HTTP调用。

仅使用Angular框架无法执行任何文件操作。您需要服务器端实现来实现这一点。如果您不熟悉服务器端编程，可以尝试使用内存中的angular数据库api

---

@aamanpurohit您能告诉我如何使用node.js创建动态内容文件吗？@Darshana此线程将对您有用@aamanpurohit谢谢您的回复。很抱歉给您带来不便，但您能告诉我如何在运行时使用http调用将此动态数据加载到angular本地文件中吗？您是否找到了用新的JSON对象替换整个文件的方法？您能告诉我如何使用后端调用更新本地JSON吗？您能告诉我是否只能在开发时使用此插件吗。如果我在生产中使用，会不会造成麻烦？@Darshana你肯定可以使用这个插件进行开发。但请记住，如果您将其用于生产，您的数据库将不安全，并且无法将大型数据集存储到内存中的web api中。内存中web api只是为了模拟后端REST api。