如何使用angular2应用程序中Node.js的读写属性以json格式删除和更新数据

Question

我在assets/json/abc.json

中有一个json文件

我要求我需要从assets文件夹中读取/abc.json文件并根据html中表单的输入值写入一些数据或从该/abc.json文件中删除一些数据。

我试过但它不起作用。 这里，读/写/删除.json文件是根据用户通过点击事件的输入。

abc.json

[
    {
        "imgPath": "fa-users",
        "dashboardName": "Command Center",
        "urlToVisit": "dashboards/static/commandcenter"
    },
    {
        "imgPath": "fa-tachometer",
        "dashboardName": "HP Dashboard",
        "urlToVisit": "dashboards/static/hpdash"
    },
    {
        "imgPath": "fa-cube",
        "dashboardName": "HP APJ",
        "urlToVisit": "dashboards/static/hpapj"
    }
]

abc.component.html

<form class="rmpm" (submit)="AddNewDashboardBox($event)">
    <div class="form-group rmpm">
        <div class='col-xs-12 rmpm'>
            Enter Dashboard Name
            <br>
            <input type="text"  class="form-control rmpm" placeholder="Dashboard Name" name="dashboardName"
                required>
            <br>
        </div>
        <div class='col-xs-12 rmpm'>
            Enter Icon Name
            <br>
            <input type="text"class="form-control rmpm" placeholder="Icon Name" name="IconName"
                required>
            <br>
        </div>
        <div class='col-xs-12 rmpm'>
            Enter Url Path to Visit
            <br>
            <input type="text"  class="form-control rmpm" placeholder="Url Path" name="UrlPath"
                required>
            <br>
        </div>
    </div>
    <button type="submit" class="btn btn-info">Add</button>
</form>

abc.component.ts

 AddNewDashboardBox(e) {
    e.preventDefault();
    let dashboardNameInput = e.target.elements[0].value;
    let IconNameInput = e.target.elements[1].value;
    let UrlPathInput = e.target.elements[2].value;

    var obj = {
      table: []
    };

    var json = JSON.stringify(obj);
    var fs = require('fs');

    fs.readFile('assets/json/abc.json', 'utf8', function readFileCallback(err, data) {
      if (err) {
        console.log(err);
      } else {
        obj = JSON.parse(data); //now it an object
        obj.table.push({ "imgPath": IconNameInput , "dashboardName": dashboardNameInput, "urlToVisit": UrlPathInput }); //add some data
        json = JSON.stringify(obj); //convert it back to json
        fs.writeFile('assets/json/abc.json', json, 'utf8'); 
      }
    });
  }

Answer 1

角度应用程序在客户端浏览器上运行，您要更改的文件驻留在服务器上。所以这件事是不可能的。

您必须编写一个api，其中angular将使用新数据进行休息调用，然后该服务器将对文件中的文件进行必要的更改（即在服务器上）。

我建议您详细了解客户端服务器体系结构。