如何使用 angular 和 Z1E35BCBA2DBA1089C7BD0805D457 中的按钮更改 json 文件中的 boolean 值？

Question

My question is, how do I write a function in my table-viewer.component.ts file to change the value from false to true within the JSON file based on whether the user clicks the cancelled button?

I have a JSON file containing the following details.

db.json

"firstName": "Hamza",
"lastName": "Gallagher",
"carReg": "FG67 POI",
"parkingNumber": "00003",
"date": "2021-01-04",
"cancelled": false

etc..

And I am displaying them in a table with angular, which shows the following: Image of table

Table-viewer.component.html

    <table class="table table-striped table-bordered table-hover">
  <thead>
  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Car Registration</th>
    <th>Parking Number</th>
    <th>Date</th>
    <th>Status</th>
    <th></th>
  </tr>
  </thead>

  <tbody>
 <tr *ngFor="let booking of bookings">

   <td>{{booking.firstName}}</td>
   <td>{{booking.lastName}}</td>
   <td>{{booking.carReg}}</td>
   <td>{{booking.parkingNumber}}</td>
   <td>{{booking.date}}</td>
   <td>
     <div *ngIf="booking.cancelled" class="red">Cancelled</div>
     <div *ngIf="!booking.cancelled" class="green">Booked</div>
   </td>
   <td>
     <button class="btn btn-danger mr-2" (click)="cancelBooking()">Cancel</button>
   </td>
 </tr>

table-viewer.component.ts

export class TableViewerComponent implements OnInit {
  bookings: Booking[] = [];

  getBookings(): void {
    this.bookingService.getAll().subscribe((book: Booking[]) => {
      this.bookings = book;
    });
  }

  constructor(private bookingService: BookingService) {
  }

  ngOnInit(): void {
    this.getBookings();
  }

  cancelBooking(): void {
  //  Help
  }

}

booking.ts

export interface Booking {
  'firstName': string;
  'lastName': string;
  'carReg': string;
  'parkingNumber': string;
  'date': string;
  'cancelled': boolean;
}

Answer 1

Table-viewer.component.html

<table class="table table-striped table-bordered table-hover">
     ...
     <td>
       <button class="btn btn-danger mr-2" (click)="cancelBooking(booking: Booking)">Cancel</button>
     </td>
  </tr>

table-viewer.component.ts

export class TableViewerComponent implements OnInit {
   ...

  cancelBooking(booking): void {
     booking.cancelled = !booking.cancelled 
     // or booking.cancelled = false; or whatever you want to do
   }
  }

Now, you have the change in the bookings array. Next, you should implement a service to rewrite a json file.

https://stackoverflow.com/a/52242184/11218448

Answer 2

I think it is as simple as:

    cancelBooking(booking:Booking){
 booking.cancelled = true;
}

And just pass it in the view to the method

Answer 3

Please use this code in your componenet.ts

cancelBooking(index): void {
  //  Help
  this.bookings[index].cancelled = true;
  }

Template: Change the loop code with below code:

<tr *ngFor="let booking of bookings; let i = index">

   <td>{{booking.firstName}}</td>
   <td>{{booking.lastName}}</td>
   <td>{{booking.carReg}}</td>
   <td>{{booking.parkingNumber}}</td>
   <td>{{booking.date}}</td>
   <td>
     <div *ngIf="booking.cancelled" class="red">Cancelled</div>
     <div *ngIf="!booking.cancelled" class="green">Booked</div>
   </td>
   <td>
     <button class="btn btn-danger mr-2" (click)="cancelBooking(i)">Cancel</button>
   </td>
 </tr>