打字稿

Question

我有一个应用，其中有车辆清单。我有一个本地.json文件，可在其中获取数据。此数据使用Web-API更新。每当我将车辆添加到列表中时，都会在.json文件中对其进行更新，但是我必须刷新Web浏览器才能看到更新的结果。当我尝试从列表中删除车辆时，其工作方式相同。我使用一个本地列表来快速获得回报，然后使用第二个列表来确保将更改保存到.json文件中。参见下面的代码。

打字稿

  // component
  vehicle: VehicleDetail;
  favVehicles: VehicleDetail[] = [];    
  favVehiclesLocal: VehicleDetail[] = [];

 ngOnInit() {
   this.vehicleService.getFavourite().subscribe(data => {
   this.favVehicles = data;
   this.favVehiclesLocal = [...data];
     });
    }
   }


 // Button function which adds the selected vehicle to your favourites
 addFav(event: VehicleDetail): VehicleDetail[] {
     this.favVehiclesLocal = [this.vehicle, ...this.favVehiclesLocal];
     console.log(this.favVehiclesLocal);
     this.vehicleService.addVehicle(event).subscribe(data => {
       event = data;
     });
     return this.favVehiclesLocal;
   }
 // Button function which deletes the selected vehicle from your favourites
 deleteFav(event: VehicleDetail): VehicleDetail[] {
       this.favVehiclesLocal = this.favVehiclesLocal.filter(h => h !== event);
       this.vehicleService.deleteVehicle(event).subscribe(data => {
         this.favVehicles = this.favVehicles.filter(h => h !== event);
         event = data;
       });
       return this.favVehiclesLocal;
     }
    console.log(this.favVehiclesLocal);
  }

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

// 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;
  }

HTML

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

这是怎么回事？我一直在.src / app / heroes /上的Angulario（https://stackblitz.com/angular/akeyovpqapx?file=src%2Fapp%2Fheroes%2Fheroes.component.ts）上查看《英雄巡回赛》，但是我看不出他们的代码和我的代码有什么不同。

如果您想让我澄清一些问题，或者想要其他信息，请告诉我。

更新

应该提到我有两种看法。这些视图是完整列表或“我的最爱”列表。根据幻灯片的值显示列表。

在上面的代码中，我写了* ngFor =“ let favVehiclesLocal的东西”以隐藏代码的未知部分，因为我认为问题已经缩小。完整的应用程序使用略有不同的方法。

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

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

sortedVehicles通过以下方式分配：

 //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;
  }

我开始认为这行代码使事情变得复杂了吗？有什么办法可以注册更改？有没有更有效的方法呢？

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

打字稿

HTML

更新

0 个答案: