Html Angular*ngFor在添加/删除时不更新列表

我有一个应用程序，其中有一个车辆列表。我有一个本地的.json文件，可以从中获取数据。此数据使用web api进行更新。每当我向列表中添加车辆时，它都会在.json文件中更新，但我必须刷新web浏览器才能看到更新的结果。当我试图从列表中删除车辆时，其工作方式与此相同。我使用一个本地列表快速返回，然后使用第二个列表确保更改保存到.json文件中。请参阅下面的代码

打字稿

---

数据来自数据库，我使用以下服务调用数据

// Service for "add to favourite" button
  addVehicle(vehicle: VehicleDetail): Observable<VehicleDetail> {
    const url = `${this.API_URL}/favourites`;
    const service = this.http
      .post<VehicleDetail>(url, vehicle, this.httpOptions)
      .pipe(
        tap(_ => this.log(`adding vehicle id=${vehicle.id}`)),
        catchError(this.handleError<VehicleDetail>('addVehicle'))
      );
    console.log(service);
    return service;
  }

  // Service for "delete from favourite" button
  deleteVehicle(vehicle: VehicleDetail): Observable<VehicleDetail> {
    const url = `${this.API_URL}/favourites`;
    const service = this.http
      .put<VehicleDetail>(url, vehicle, this.httpOptions)
      .pipe(
        tap(_ => this.log(`deleted vehicle id=${vehicle.id}`)),
        catchError(this.handleError<VehicleDetail>('deleteVehicle'))
      );
    console.log(service);
    return service;
  }

---

我开始觉得这行代码会让事情变得复杂？有什么办法可以帮我登记一下零钱吗？有什么更有效的方法吗？

有两个add，addFav，ADDVERVICE，你在说哪一个add？从json哪里提取数据？addFav是AddFavorite的缩写，它是我在组件中的函数。我正在使用web api，我的addVehicle来自我的.service.ts。我会更新这篇文章。没有什么问题：数据是从JSON文件加载的，并保存在内存中。应用程序无法知道基础文件已更新。您的代码与Angular示例之间的区别在于，在他们的代码中，他们推送

变量内的新项
add
@user184994我同意代码非常相似，但它们的工作方式不同。当我按add或delete时，我会在.json文件中看到更新，但在DOM中看不到任何差异。《英雄之旅》没有使用太多花哨的代码，而且似乎仍然有效。我是不是错过了一些基本的东西？是的。您的代码将调用一个服务，该服务将更新该文件。Angular实际上并不知道文件已经更新。与此相反，Angular示例不更新文件，它还通过在subscribe函数中将新值推入该数组来更新变量（您的等效项是
favvehiclescal
）。您的
POST
请求是否返回添加了项目的新列表？
// Service for "add to favourite" button
  addVehicle(vehicle: VehicleDetail): Observable<VehicleDetail> {
    const url = `${this.API_URL}/favourites`;
    const service = this.http
      .post<VehicleDetail>(url, vehicle, this.httpOptions)
      .pipe(
        tap(_ => this.log(`adding vehicle id=${vehicle.id}`)),
        catchError(this.handleError<VehicleDetail>('addVehicle'))
      );
    console.log(service);
    return service;
  }

  // Service for "delete from favourite" button
  deleteVehicle(vehicle: VehicleDetail): Observable<VehicleDetail> {
    const url = `${this.API_URL}/favourites`;
    const service = this.http
      .put<VehicleDetail>(url, vehicle, this.httpOptions)
      .pipe(
        tap(_ => this.log(`deleted vehicle id=${vehicle.id}`)),
        catchError(this.handleError<VehicleDetail>('deleteVehicle'))
      );
    console.log(service);
    return service;
  }

 <!-- list of vehicles -->
        <aside *ngIf="favVehiclesLocal" class="vehiclelist">
            <mat-nav-list matSort (matSortChange)="sortData($event)">
                <th mat-sort-header="timestamp">Time of alarms</th>
                <th mat-sort-header="status">Severity of status</th>
                <mat-list-item *ngFor="let stuff of favVehiclesLocal" class="vehicles">
                    <span [ngClass]="getColors(stuff)"></span>
                    <p matLine (click)="updateInfo(stuff.id)"> {{ stuff.name }} </p>
                    <button mat-icon-button id="btn" *ngIf='check(stuff.alarm)' matTooltip="{{stuff.alarm[tooltipIndex(stuff)]?.timestamp}} - {{stuff.alarm[tooltipIndex(stuff)]?.description}}">
                        <mat-icon>info</mat-icon>
                    </button>
                </mat-list-item>
            </mat-nav-list>
        </aside>

// add and delete buttons
 <div class="details">
            <button mat-raised-button #add (click)="addFav(vehicle)">Add to favourite</button>
            <button mat-raised-button #delete (click)="deleteFav(vehicle)">Remove from favourite</button>
        </div>

 //app.component.html
 <!-- list of vehicles -->
        <aside *ngIf=".........
                <mat-list-item *ngFor="let stuff of sortedVehicles" class="vehicles">

                    .........
        </aside>

 //app.component.html
 <mat-slide-toggle (change)="myFavourite(favVehiclesLocal)">Show favourites</mat-slide-toggle>

// app.component.ts
myFavourite(vehicles: VehicleDetail[]): VehicleDetail[] {
    this.toggleChecked = !this.toggleChecked;
    console.log(this.toggleChecked);
    if (this.toggleChecked) {
      this.sortedVehicles = vehicles.slice();
    } else {
      this.sortedVehicles = this.vehicleDetails.slice();
    }
    console.log(this.sortedVehicles);
    return this.sortedVehicles;
  }