Angular内存数据库执行删除、更新操作时无法获取对应ID的解决方法咨询

方案1：先查询匹配记录拿到ID后再执行操作 #

angular-in-memory-web-api 天生支持查询参数过滤数据，你可以先新增一个查询方法，根据表单拿到的ProviderCode和ProviderType匹配到对应记录，拿到ID后再调用删除/更新接口：

// 服务中新增按两个字段匹配记录的方法
public getAirlineByParams(code: string, type: string) {
  return this.httpClient.get(`${this.SERVER_URL}Data?ProviderCode=${code}&ProviderType=${type}`);
}

// 组件中删除逻辑示例
deleteAirline(formValue: {ProviderCode: string, ProviderType: string}) {
  this.airlineService.getAirlineByParams(formValue.ProviderCode, formValue.ProviderType).subscribe((res: any[]) => {
    if (res.length) {
      const targetId = res[0].id;
      this.airlineService.deleteAirlines(targetId).subscribe(() => {
        // 删除成功后续逻辑
      })
    }
  })
}

方案2：组件操作时直接携带ID字段（最推荐） #

通常航空公司列表页渲染时，你调用getAllAirlines拿到的所有记录本身就带id字段，你可以在点击删除/编辑按钮时，直接把整条记录传递给操作表单，把ID作为隐藏字段存在表单中，提交操作时直接读取ID使用，不需要额外查询：

<!-- 列表页示例 -->
<div *ngFor="let airline of airlineList">
  <span>{{airline.ProviderName}}</span>
  <button (click)="openDeleteModal(airline)">删除</button>
  <button (click)="openEditModal(airline)">编辑</button>
</div>

// 组件中打开删除弹窗的逻辑
openDeleteModal(airline: any) {
  this.deleteForm.patchValue({
    id: airline.id,
    ProviderCode: airline.ProviderCode,
    ProviderType: airline.ProviderType
  })
}

// 提交删除时直接取ID
submitDelete() {
  const id = this.deleteForm.value.id;
  this.airlineService.deleteAirlines(id).subscribe();
}

方案3：自定义内存数据库主键 #

如果ProviderCode+ProviderType是全局唯一的组合，你可以直接把这个组合作为主键使用，无需依赖默认的自增ID：

// 修改createDb逻辑，拼接两个字段作为主键
createDb(){
  let Data= [
    {id: '9W-_Domestic' , ProviderCode: '9W-', ProviderName: 'Jet Airways', ProviderType: 'Domestic' },
    {id: 'EK-_International' , ProviderCode: 'EK-', ProviderName: 'Emirates', ProviderType: 'International' },
  ];
  return {Data};
}

// 后续删除/更新时直接拼接两个字段作为ID即可
public deleteAirlines(code: string, type: string){
  const targetId = `${code}_${type}`;
  return this.httpClient.delete(`${this.SERVER_URL + 'Data'}/${targetId}`);
}

方案4：重写内存数据库的请求处理逻辑 #

你可以在实现InMemoryDbService的类中重写delete、put方法的处理逻辑，自定义匹配规则，无需依赖ID匹配：

// 你的内存数据库服务类中新增以下逻辑
import { RequestInfo } from 'angular-in-memory-web-api';

delete(reqInfo: RequestInfo) {
  const collectionName = reqInfo.collectionName;
  const [code, type] = reqInfo.url.split('/').slice(-2);
  const collection = reqInfo.collection as any[];
  const targetIndex = collection.findIndex(item => item.ProviderCode === code && item.ProviderType === type);
  if (targetIndex > -1) {
    collection.splice(targetIndex, 1);
  }
  return reqInfo.utils.createResponse$(() => ({
    status: 204,
    body: {}
  }));
}
// put方法可以参照上面的逻辑重写

这种方法可以直接复用你现在写的删除、更新接口的调用方式，不需要调整业务代码。

内容的提问来源于stack exchange，提问作者Ambika Trikha