javascript - 在 JSON 文件中写入并在 Angular 组件中显示相同内容

包含4个组件的项目 1. 登录 2. 主页（查看员工的详细信息） 3. 查看（显示员工的完整信息） 4. 编辑。我已经能够从.json文件读取员工信息，并在详细视图组件和查看组件中显示。

现在我想更改 JSON 文件中可用的详细信息，并在 View 和 ViewinDetail 组件上显示相同内容。

我的 Employee.json 如下：

[
    {
        "id": 1,
        "firstName": "Abhi",
        "lastName": "A B",
        "gender": "male",
        "age": 25,
        "email": "[email ",
        "phoneNumber": 8888888888,
        "department": "IT",
        "address": "Bengaluru"
    },
    {
        "id": 2,
        "firstName": "Amogh",
        "lastName": "A M",
        "gender": "male",
        "age": 25,
        "email": "[email ",
        "phoneNumber": 8888888888,
        "department": "IT",
        "address": "Bengaluru"
    },
    {
        "id": 3,
        "firstName": "Harsha",
        "lastName": "H A",
        "gender": "male",
        "age": 25,
        "email": "[email ",
        "phoneNumber": 8888888888,
        "department": "IT",
        "address": "Bengaluru"
    }
]

我的 home.html 如下：

<header>Welcome Home</header>
<br />
<div class="container panel panel-default" *ngFor="let employee of employeeList;">
        <div class="panel-heading">
                <h3 class="panel-title">{{employee.firstName}} {{employee.lastName}}</h3>
        </div>
        <div class="panel-body">
                <div class="col-xs-10">
                        <div class="row vertical-align">
                                <div class="col-xs-8 offset-md-2">
                                        <div class="row">
                                                <div class="col-xs-6">
                                                        First Name
                                                </div>
                                                <div class="col-xs-6">
                                                        : {{employee.firstName}}
                                                </div>
                                        </div>
                                        <div class="row">
                                                <div class="col-xs-6">
                                                        Last Name
                                                </div>
                                                <div class="col-xs-6">
                                                        : {{employee.lastName}}
                                                </div>
                                        </div>
                                        <div class="row">
                                                <div class="col-xs-6">
                                                        Gender
                                                </div>
                                                <div class="col-xs-6">
                                                        : {{employee.gender}}
                                                </div>
                                        </div>
                                        <div class="row">
                                                <div class="col-xs-6">
                                                        Department
                                                </div>
                                                <div class="col-xs-6">
                                                        : {{employee.department}}
                                                </div>
                                        </div>
                                        <div>
                                                <button class="btn btn-primary" (click)="viewEmployee(employee.id)">
                                                        View</button>&nbsp;
                                                <button class="btn btn-primary" (click)="editEmployee(employee.id)">
                                                        Edit
                                                </button>
                                        </div>
                                </div>
                        </div>
                </div>
        </div>
</div>

我的 home.ts 如下：

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import employees from '../employeeDetails/employees.json';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
  constructor(private router: Router) { }
  public employeeList: {
    id: number;
    firstName: string;
    lastName: string;
    gender: string;
    age: number;
    email?: string;
    phoneNumber?: number;
    department: string;
  }[] = employees;
  // tslint:disable-next-line: use-lifecycle-interface
  ngOnInit(): void { }

  viewEmployee(id): any {
    this.router.navigateByUrl(`/view/${id}`);
  }

  editEmployee(i): any {
    this.router.navigateByUrl('/edit');
  }
}

我的 view.html 如下：

<header>View Page</header>
<br />
<div class="container panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">{{employee.firstName}} {{employee.lastName}}</h3>
  </div>
  <div class="panel-body">
    <div class="col-xs-10">
      <div class="row vertical-align">
        <div class="col-xs-8 offset-md-2">
          <div class="row">
            <div class="col-xs-6">
              First Name
            </div>
            <div class="col-xs-6">
              : {{employee.firstName}}
            </div>
          </div>
          <div class="row">
            <div class="col-xs-6">
              Last Name
            </div>
            <div class="col-xs-6">
              : {{employee.lastName}}
            </div>
          </div>
          <div class="row">
            <div class="col-xs-6">
              Gender
            </div>
            <div class="col-xs-6">
              : {{employee.gender}}
            </div>
          </div>
          <div class="row">
            <div class="col-xs-6">
              Age
            </div>
            <div class="col-xs-6">
              : {{employee.age}}
            </div>
          </div>
          <div class="row">
            <div class="col-xs-6">
              Email
            </div>
            <div class="col-xs-6">
              : {{employee.email}}
            </div>
          </div>
          <div class="row">
            <div class="col-xs-6">
              Phone Number
            </div>
            <div class="col-xs-6">
              : {{employee.phoneNumber}}
            </div>
          </div>
          <div class="row">
            <div class="col-xs-6">
              Department
            </div>
            <div class="col-xs-6">
              : {{employee.department}}
            </div>
          </div>
          <div>
            <button class="btn btn-primary" (click)="editEmployee()">
              Edit
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

我的 view.ts 如下：

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import employees from '../employeeDetails/employees.json';

@Component({
  selector: 'app-view',
  templateUrl: './view.component.html',
  styleUrls: ['./view.component.css']
})
export class ViewComponent implements OnInit {
  constructor(private router: Router, private route: ActivatedRoute) { }
  public employeeList: {
    id: number;
    firstName: string;
    lastName: string;
    gender: string;
    age: number;
    email?: string;
    phoneNumber?: number;
    department: string;
  }[] = employees;
  employee;
  ngOnInit(): void {
    this.route.params.subscribe((params) => {
      const employeeId = params.id;
      this.employee = employees.filter((e) => e.id === +employeeId)[0];
    });
  }
  editEmployee(): any {
    this.router.navigateByUrl('/edit');
  }
}

我的 edit.html 如下：

<header>Edit Page</header>
<div class="container" style="margin-top:1%" action="/view">
    <div class="col-md-6 col-md-offset-3">
        <div class="form-group">
            <label for="exampleInputEmail">First Name</label>
            <input type="text" class="form-control">
        </div>
        <div class="form-group">
            <label for="exampleInputPassword">LastName</label>
            <input type="text" class="form-control">
        </div>
        <div class="form-group">

            <tr><label for="exampleInputGender">Gender : </label>
                &nbsp;&nbsp;<td><input type="radio" id="male" name="gender" value="male" checked="checked">
                    <label for="male">Male</label><br></td> &nbsp;&nbsp;
                <td><input type="radio" id="female" name="gender" value="female">
                    <label for="female">Female</label></td>
            </tr>


        </div>
        <div class="form-group">
            <label for="exampleInputAge">Age</label>
            <input type="number" class="form-control">
        </div>
        <div class="form-group">
            <label for="exampleInputEmail">Email</label>
            <input type="email" class="form-control">
        </div>
        <div class="form-group">
            <label for="exampleInputPhoneNumber">Phone Number</label>
            <input type="text" class="form-control" id="exampleInputPhoneNumber">
        </div>
        <div class="form-group">
            <label for="exampleInputPhoneNumber">Address</label>
            <textarea type="textbox" class="form-control" id="exampleInputAddress"></textarea>
        </div>
        <input type="submit" value="Submit" (click)=editDetails()>
    </div>
</div>

我的 edit.ts 如下：

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import employees from '../employeeDetails/employees.json';

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

  constructor(private router: Router, private route: ActivatedRoute) { }
  public employeeList: {
    id: number;
    firstName: string;
    lastName: string;
    gender: string;
    age: number;
    email?: string;
    phoneNumber?: number;
    department: string;
  }[] = employees;

  ngOnInit(): void {
  }
  editDetails(): any {
    this.router.navigateByUrl('/edit');
  }
}

请帮忙，我不太清楚该如何进行。我想过编辑 .json 文件，但不知道如何操作。其他方法也可以接受。

答案＃1

你不能仅通过 TypeScript 向项目中存储的 JSON 文件写入内容。

我假设你想复制一个服务器，这就是为什么你在本地存储了一个json并在组件中获取其值的原因。

要写入这样的 JSON 文件，你需要安装类似 json-server 的东西，然后向本地主机服务器发起 POST 调用。那样应该会得到预期的行为。

要获取 json 数据，你需要向同一 localhost 服务器发起 GET 请求

如评论中所述，如果您想使用sesssionStorage，您可以简单地将 json 保存到ParentComponent中作为

constructor(){
  sessionStorage.setItem('empList',employees);
}

然后要使用它 OtherComponents，你可以这样做：

ngOnInit(){
  const data = JSON.parse(sessionStorage.getItem('empList'));
  if (!!data){
     // there is no data in sessionStorage
  }
}