如何在Angular项目中根据邮政编码从数组中查询匹配对应城市？

原有代码问题 #

• 方法名不匹配：onKeyUp 事件中调用的 getCity2 方法不存在，实际定义的方法名为 getCity
• getCity 方法未设置返回值，筛选邮编后获取的是迭代器对象，没有解析出对应城市列表
• 缺少表单初始化逻辑，未处理无匹配邮编的边界场景

修正后代码 #

delivery.component.ts #

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-delivery',
  templateUrl: './delivery.component.html',
  styleUrls: ['./delivery.component.css']
})
export class DeliveryComponent {
  deliveryForm: FormGroup;
  // 邮编对应可配送城市/门店映射表
  zipMap: Record<string, string[]> = {
    "10020": ["A市", "B市"],
    "20050": ["X市", "Y市"]
  };

  constructor(private fb: FormBuilder) {
    // 初始化配送表单
    this.deliveryForm = this.fb.group({
      zip: [''],
      city: ['']
    });
  }

  // 根据输入邮编查询对应城市
  getCity = (currentZip: string): string => {
    // 如需模糊匹配（输入部分邮编也返回结果），将===替换为includes即可
    const matchedZip = Object.keys(this.zipMap).find(zipKey => zipKey === currentZip);
    // 匹配到邮编返回城市列表拼接结果，无匹配返回空字符串
    return matchedZip ? this.zipMap[matchedZip].join('、') : '';
  }

  // 监听邮编输入框keyup事件
  onKeyUp(event: KeyboardEvent): void {
    const inputZip = (event.target as HTMLInputElement).value.trim();
    this.deliveryForm.patchValue({
      city: this.getCity(inputZip)
    });
  }
}

delivery.component.html #

<form [formGroup]="deliveryForm">
  <div style="margin: 0 auto;text-align: left;">
    <div>
      <label>邮政编码：</label>
      <div><input id="zip" type="text" formControlName="zip" (keyup)="onKeyUp($event)"/></div>
    </div>
    <div>
      <label>可配送城市/门店：</label>
      <!-- 加readonly属性避免用户手动修改自动填充的结果 -->
      <input id="city" type="text" formControlName="city" readonly>
    </div>
  </div>
</form>

可选调整说明 #

如果需要支持多城市选择而非直接填充到输入框，可以将getCity方法的返回值改为字符串数组，绑定到下拉选择组件或者多选组件展示即可。

内容的提问来源于stack exchange，提问作者pratyaksh sudan