Json 在列表中添加信息

我正在学习Angular 6，我的网站上有一个列表。现在，我需要给我的网站的用户提供向列表中添加条目的可能性。有一个表单有4个字段和一个提交按钮，当单击提交时，值应存储在任何位置，所有条目应永久显示在站点上，而不仅仅是在活动会话中

我怎样才能做到这一点？我需要包括某种数据库吗？或者可以将新数据集附加到JSON文件中吗

先谢谢你

---

编辑：这是一个培训项目，只能通过我工作的公司的内部网获得，因此，缺少验证码或类似内容的安全问题不是一个因素

如果您打算长期使用此项目，并且如果条目数较多且用户较多，则应使用一些数据库。如果用户数量有限，您需要临时使用此应用程序，那么使用json文件也很好。如果您不熟悉数据库逻辑等，使用json文件可以将您从数据库逻辑等中解救出来

要将某些数据保存到需要使用某种数据库的任何位置。 Angular是JavaScript框架。它有助于编写应用程序。但它对服务器端没有任何作用（当然，除了CLI和NodeJS用户喜欢做的其他事情）。 JSON并不是浏览器和服务器之间通信的唯一方式。但从角度来说，这是最简单的方法。 服务器上需要一些东西（我想是PHP脚本），它将从Angular应用程序接收数据并返回一些反馈。在使用PHP的情况下，您将了解如何接收JSON POST（$\u POST和$\u请求将不起作用）

关于“如何学习角度”，我的建议是进入本教程

---

运行两到三次，您将了解承诺、可观察内容、通信、模板、服务和所有其他内容的工作原理。

可以将数据附加到JSON文件的新数据集中创建一个服务，使用该服务读取该JSON文件，从而为您提供读取该JSON文件的基础知识

Config.service.ts

@Injectable()
export class ConfigService {

  private static _config: any = {}

  constructor(private _http: Http) { }
  load() {
    return new Promise((resolve, reject) => {         
      this._http.get('../assets/' + 'data.json')
        .map(res => res.json())
        .subscribe((data) => {
          console.log("inside http get of the new service");
          console.log(data);
          ConfigService._config = data;
          resolve(true);
        },
          (error: any) => {
            console.error(error);
            return Observable.throw(error.json().error || 'Server error');
          });
    });
  }

  // Gets a value of specified property in the configuration file
  get(key: any) {
    console.log("tell me the base :" + ConfigService._config['BASE_URL']);
    return ConfigService._config[key];
  }
}

export function ConfigFactory(config: ConfigService) {
  return () => config.load();
}

export function init() {
  return {
    provide: APP_INITIALIZER,
    useFactory: ConfigFactory,
    deps: [ConfigService],
    multi: true
  }
}

const ConfigModule = {
  init: init
}

export { ConfigModule };

import { CommonModule } from '@angular/common';
import { ConfigModule, ConfigService } from './config-service';

providers:[
 ConfigService,
    ConfigModule.init(),
    ]

在主模块中添加这些行

应用程序模块.ts

@Injectable()
export class ConfigService {

  private static _config: any = {}

  constructor(private _http: Http) { }
  load() {
    return new Promise((resolve, reject) => {         
      this._http.get('../assets/' + 'data.json')
        .map(res => res.json())
        .subscribe((data) => {
          console.log("inside http get of the new service");
          console.log(data);
          ConfigService._config = data;
          resolve(true);
        },
          (error: any) => {
            console.error(error);
            return Observable.throw(error.json().error || 'Server error');
          });
    });
  }

  // Gets a value of specified property in the configuration file
  get(key: any) {
    console.log("tell me the base :" + ConfigService._config['BASE_URL']);
    return ConfigService._config[key];
  }
}

export function ConfigFactory(config: ConfigService) {
  return () => config.load();
}

export function init() {
  return {
    provide: APP_INITIALIZER,
    useFactory: ConfigFactory,
    deps: [ConfigService],
    multi: true
  }
}

const ConfigModule = {
  init: init
}

export { ConfigModule };

import { CommonModule } from '@angular/common';
import { ConfigModule, ConfigService } from './config-service';

providers:[
 ConfigService,
    ConfigModule.init(),
    ]

然后，您可以在需要数据的任何组件或服务上注入此服务

---

此外，您必须在应用程序文件夹下添加一个资产文件夹，并将data.json放在那里。

这是一个培训项目，我将使用它，以便同事可以报名参加体育比赛。所以每个条目只有四个值，我猜最多有50个条目，所以我可能应该使用JSON。您能给我一个如何实现这一点的提示吗？因此stackoverflow不是讨论论坛，如果您面临问题，请尝试一些东西，然后询问您已经尝试了什么，如果您使用json，您可能需要这个库，但您没有提到您将在服务器端使用什么语言？。。。老实说，我不知道。。。目前，我只在本地环境>上工作。浏览器不允许您在本地计算机上保存文本文件。唯一的通信是客户端-服务器。别无选择