Angular - 刷新内容的问题

Question

我制作了一个用于管理数据库的基本应用程序。数据显示在表格和用于删除每个项目的按钮中。出于某种原因，删除项目时，数据不会在第一次单击按钮时刷新，而是在第二次单击时刷新。第二次点击按钮，控制台输出http请求的404错误，因为item不存在。

我想知道为什么在那之前没有重新加载数据。这是我的组件：

import { Component, OnInit } from '@angular/core';
import { BackendService } from 'src/app/backend.service';
import { ICity } from '../interfaces/city';
import { ICountry } from '../interfaces/country';

@Component({
  selector: 'app-cities',
  templateUrl: './cities.component.html',
  styleUrls: ['./cities.component.css']
})
export class CitiesComponent implements OnInit {
  public countries: ICountry[] = [];
  public cities: ICity[] = [];

  constructor(private _backendService: BackendService) { }

  ngOnInit(): void {
    this.loadCities();
    this.loadCountries();
  }

  loadCities() {
    this._backendService.getCities().subscribe(data => {
      this.cities = JSON.parse(JSON.stringify(data)).cities;
    });
  }
  
  loadCountries() {
    this._backendService.getCountries().subscribe(data => {
      this.countries = JSON.parse(JSON.stringify(data)).countries;
    });
  }

  submit(city: ICity) {
    this.remove(city);
    this.ngOnInit();
  }

  remove(city: ICity): void {
    this.countries.forEach((cn) => {
      if (cn.majorCities.find(c => c.name == city.name)) {
        console.log(cn);
        this._backendService.removeCity(cn.name.toLowerCase(), city.name.toLowerCase()).subscribe(data => console.log(data));
      }
    });
  }
}

模板：

<h1>Cities</h1>
<tbody>
    <tr>
        <td><h3>City</h3></td>
        <td><h3>Population</h3></td>
        <td><h3>Area in km²</h3></td>
        <td><h3>City Rank</h3></td>
    </tr>
    <tr *ngFor="let city of cities">
        <td>{{ city.name }}</td>
        <td>{{ city.population }}</td>
        <td>{{ city.area }}</td>
        <td>{{ city.rank }}</td>
        <button type="button" (click)="submit(city)">Delete</button>
    </tr>
</tbody>

Answer 1

您可能在此处遇到竞争条件。您正在提交删除请求，但在收到和处理响应之前执行刷新。使用 RxJS 订阅时，您可以执行以下操作...

this._backendService.removeCity(cn.name.toLowerCase(), city.name.toLowerCase()).subscribe(
    // This is the callback for when the response was successful.
    // No error was caught during the request.
    (data) => {
        // You can attempt a refresh here because we know the request has
        // completed and the row was deleted.
        this.refresh();
    },
    // This is the callback for when the response was not successful.
    // The backend service threw some sort of error, or the code ran into an error
    // during execution. You can handle the error here (display some message).
    (error) => {
        // Do something in response to the error.
    }
    // This is the code to run when the Observable has communicated that it has
    // completed. The observable has said "I'm done sending messages, there will be
    // no more," so do whatever you need to in response to that.
    () => {
        // Do something...
    }
);

我也不建议使用ngOnInit 进行刷新操作，因为它是a reserved method used by Angular；您可能会发现，致电ngOnInit，所做的事情比您想象的要多。

ngOnInit() {
    this.refresh();
}

public refresh(): void {
    // Your refresh logic here.
}