Javascript 写入JSON文件，并在组件上以角度显示相同的内容_Javascript_Html_Json_Angular_Typescript

Javascript 写入JSON文件，并在组件上以角度显示相同的内容

javascript html json angular typescript

Javascript 写入JSON文件，并在组件上以角度显示相同的内容,javascript,html,json,angular,typescript,Javascript,Html,Json,Angular,Typescript,包含4个组件的项目1。登录2。主页（查看员工的详细信息）3。查看（以显示员工的完整详细信息）和4。编辑我已经能够从.json文件中读取员工详细信息，并显示在“查看详细信息”组件和“查看”组件上现在我想更改JSON文件中可用的详细信息，并在View和ViewinDetail组件上显示相同的内容我的Employee.json如下所示： [ { "id": 1, "firstName": "Abhi"

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

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

我的Employee.json如下所示：

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

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

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');
  }
}

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

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');
  }
}

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');
  }
}

My home.html如下所示：

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

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

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');
  }
}

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

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');
  }
}

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');
  }
}

My view.html如下所示：

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

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

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');
  }
}

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

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');
  }
}

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');
  }
}

My 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>

请帮忙，我不知道该怎么做。我想编辑.json文件，但不知道怎么做。任何其他方法都是可以接受的。

您不能仅通过typescript将存储在项目中的JSON文件写入

我假设您想要复制一个服务器，这就是为什么您在本地存储了一个

json

，并在组件中获取值

要写入这样的JSON文件，您需要安装类似的东西，然后对localhost服务器进行

POST

调用。这应该给你预期的行为

要获取

json

数据，需要对同一

localhost

服务器进行

GET

调用

如注释中所述，如果要使用

sessionstorage

，只需将json保存到

ParentComponent

中即可

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

然后，要使用它

其他组件

，您可以执行以下操作：

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

您不能仅仅通过typescript将存储在项目中的JSON文件写入