Angular

Question

我觉得好像我在这里遗漏了一个关键概念，但我想显示地点自动完成查询的结果，但用更熟悉的名称替换 types[0] 名称，例如。郊区或城市而不是 sublocality_level_1 或 administrative_area_level_1

地点 API 结果如下所示：

places api result:
(7) [{…}, {…}, {…}, {…}, {…}, {…}, {…}]
0:
long_name: "40"
short_name: "40"
types: ["street_number"]
__proto__: Object
1:
long_name: "Belmont Terrace"
short_name: "Belmont Terrace"
types: ["route"]
__proto__: Object
2:
long_name: "Milford"
short_name: "Milford"
types: (3) ["sublocality_level_1", "sublocality", "political"]
__proto__: Object
3:
long_name: "Auckland"
short_name: "Auckland"
types: (2) ["locality", "political"]
__proto__: Object
4:
long_name: "Auckland"
short_name: "Auckland"
types: (2) ["administrative_area_level_1", "political"]
__proto__: Object
5:
long_name: "New Zealand"
short_name: "NZ"
types: (2) ["country", "political"]
__proto__: Object
6:
long_name: "0620"
short_name: "0620"
types: ["postal_code"]
__proto__: Object
length: 7
__proto__: Array(0)

所以我想我可以制作一个数组来映射这样的表单：

   formAddressTypes = [
    {NZ: [
      { id: 0, formName: 'street_number', apiType: 'street_number' },
      { id: 1, formName: 'route', apiType: 'route' },
      { id: 2, formName: 'suburb', apiType: 'sublocality_level_1' },
      { id: 3, formName: 'city', apiType: 'administrative_area_level_1' },
      { id: 4, formName: 'postcode', apiType: 'postal_code' },
      { id: 5, formName: 'country', apiType: 'country' }
      ]
    }
  ];

然后使用每个元素的api类型属性来匹配api结果的类型[0]属性：

    for (const i in this.formAddressTypes[0].NZ) {
      if (i) {
        const formType = this.formAddressTypes[0].NZ[i].apiType;
        // console.log('form type:', formType);
        for (const j in data.address_components) {
          if (j) {
            const googleType = data.address_components[i].types[0];
            // console.log('google type:', googleType);
            if (formType === googleType) {
              console.log('match', formType, googleType);
            }
          }
        }
      }
    }

控制台中的结果是：

所以城市 (administrative_area_level_1) 和邮政编码 (postal_code) 永远不会匹配，即使它们都存在于表单数组中。

这可能是一种非常笨拙的方法 - 我只是在学习 - 但如果你能提供任何帮助，我将不胜感激。

谢谢！

马尔科姆

Answer 1

只映射一个映射您要用显示名称替换的特定名称的数组不是更容易吗？

如果您使用 Object.values(..) 从带有键的对象创建数组，则在 typescript 中使用它会容易得多。

我对你的数据做了一些处理here

Angular - 映射 Google 将 API 结果放入表单 - 如何映射两个长度不等但共享公共键的对象

Angular - Mapping Google places API result to a form - how to map two objects of unequal length but sharing a common key

javascript

arrays

object

google-places-api