Question

问题：
如何根据其ID显示我的下拉列表中的预选项目。

说明/问题：
我的下拉选项来自动态Web服务，该服务根据用户ZipCode查找提供者。提供商的一个例子是{电话：＆＃34; 5093240817＆＃34;，sp_id：＆＃34; 1＆＃34;，姓名：＆＃34; John Doe＆＃34; ...} ...下拉列表显示要选择的用户的名称，但我们只存储ID。所以我面临的问题是，如果用户返回更改其提供者，我想显示用户原始的提供者名称，但我只有ID。

旁注：我们无法存储Name的值，因为Web服务可以更改提供者名称值。

我的尝试：
我解决这个问题的想法是过滤＆＃34;过滤＆＃34;基于原始ID的Providers数组，然后找到那个名字。我是Angular和打字稿的新手，所以我遇到了麻烦......

我的想法。
我正在阅读另一篇SO帖子并试图了解他们是如何做到的，但我又一次遇到了麻烦。（How do I filter an array with TypeScript in Angular 2?）

    const showValue = this.serviceProvider.filter(sp_id => 
    this.selectedAppointment.sp_id)

** this.selectedAppointment.sp_id保留原始ID值。

服务提供商选项

{电话：＆＃34; 5093240817＆＃34;，sp_id：＆＃34; 1＆＃34;，经度：-77.3841197，提供者类型：＆＃34;儿科＆＃34;，纬度：38.9808589，姓名：＆＃34; John Doe＆＃34; ...} 1个

{电话：＆＃34; 097420454＆＃34;，sp_id：＆＃34; 3＆＃34;，经度：-77.3898602，提供者类型：＆＃34;儿科＆＃34;，纬度：38.914697200000006，姓名：＆＃34;金＆＃34; ...} 2个

Answer 1

在您的示例中，sp_id是传递给filter回调的每次迭代的服务提供者选项。我想您可能会误解箭头功能的工作方式：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

另外，请查看filter方法：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

我认为您要做的是（将该选项的sp_id与所选值进行比较）：

 this.serviceProvider.filter(sp => sp.sp_id === this.selectedAppointment.sp_id);

或者，为了提供一些清晰度：

this.serviceProvider.filter((serviceProvider) => {
    return serviceProvider.sp_id === this.selectedAppointment.sp_id;
}

Answer 2

通过迭代选项然后在表单中设置匹配值来结束解决此问题！

  setProvider(sp_id) {
    for(let sp in this.serviceProvider) {
      if (sp_id == this.serviceProvider[sp].sp_id) {
        (<FormGroup>this.patientAppointmentForm)
          .patchValue({serviceProvider: 
this.serviceProvider[sp].sp_id}, {onlySelf: true});
      }
    }
  }

在Typescript中过滤数组

2 个答案: