如何在打字稿中迭代数组对象
How to iterate an object of arrays in typescript
我正在尝试根据邮政编码值自动填充城市。到目前为止,我已经能够将用户输入的邮政编码与静态邮政编码列表相匹配,但我在实现获取与用户输入的邮政编码对应的城市的逻辑时遇到了麻烦。
下面是来自我的应用程序的 ts 和 html 文件的片段
test.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { Validators } from '@angular/forms';
import { FormArray } from '@angular/forms';
@Component({
selector: 'test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
profileForm = this.fb.group({
organizationAddress: this.fb.group({
street:['', Validators.required],
zip: ['', Validators.required],
city: ['', Validators.required],
state:['', Validators.required]
})
});
zip = {
"city1": ["1", "2" ],
"city2":[ "3", "4", "5"],
"city3":[ "6", "7" ]
};
onKeyUp(event: any){
let city, zipCodes = this.zip, score;
for (let i=0; i<Object.keys(zipCodes).length; i++ ){
Object.values(zipCodes).forEach(function (value){
for( let zip in value){
if(event.target.value == `${value[zip]}`){
score = `${value[zip]}`;
break;
}
}
if(score = Object.values(zipCodes))
{
console.log("city ",Object.keys(score))
city = Object.keys(score);
}
})
}
this.profileForm.patchValue({
organizationAddress:{
city: city}
})
}
test.component.html
<div formGroupName="organizationAddress">
<h4>Address</h4>
<label for="zip">Zip Code : </label>
<input id="zip" type="text" formControlName="zip" (keyup)="onKeyUp($event)"><br/>
<label for="city">City : </label>
<input id="city" type="text" formControlName="city"><br/>
</div>
这是一个简单的函数,returns 给定邮政编码的正确城市:
zipCodes = {
"city1": ["1", "2" ],
"city2":[ "3", "4", "5"],
"city3":[ "6", "7" ]
};
getCity = theCurrentZip => {
return Object.keys(zipCodes).filter(z => {
return zipCodes[z].includes(theCurrentZip)
})[0]
}
console.log(getCity("7"))
console.log(getCity("2"))
console.log(getCity("99"))
我正在尝试根据邮政编码值自动填充城市。到目前为止,我已经能够将用户输入的邮政编码与静态邮政编码列表相匹配,但我在实现获取与用户输入的邮政编码对应的城市的逻辑时遇到了麻烦。
下面是来自我的应用程序的 ts 和 html 文件的片段
test.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder } from '@angular/forms';
import { Validators } from '@angular/forms';
import { FormArray } from '@angular/forms';
@Component({
selector: 'test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
profileForm = this.fb.group({
organizationAddress: this.fb.group({
street:['', Validators.required],
zip: ['', Validators.required],
city: ['', Validators.required],
state:['', Validators.required]
})
});
zip = {
"city1": ["1", "2" ],
"city2":[ "3", "4", "5"],
"city3":[ "6", "7" ]
};
onKeyUp(event: any){
let city, zipCodes = this.zip, score;
for (let i=0; i<Object.keys(zipCodes).length; i++ ){
Object.values(zipCodes).forEach(function (value){
for( let zip in value){
if(event.target.value == `${value[zip]}`){
score = `${value[zip]}`;
break;
}
}
if(score = Object.values(zipCodes))
{
console.log("city ",Object.keys(score))
city = Object.keys(score);
}
})
}
this.profileForm.patchValue({
organizationAddress:{
city: city}
})
}
test.component.html
<div formGroupName="organizationAddress">
<h4>Address</h4>
<label for="zip">Zip Code : </label>
<input id="zip" type="text" formControlName="zip" (keyup)="onKeyUp($event)"><br/>
<label for="city">City : </label>
<input id="city" type="text" formControlName="city"><br/>
</div>
这是一个简单的函数,returns 给定邮政编码的正确城市:
zipCodes = {
"city1": ["1", "2" ],
"city2":[ "3", "4", "5"],
"city3":[ "6", "7" ]
};
getCity = theCurrentZip => {
return Object.keys(zipCodes).filter(z => {
return zipCodes[z].includes(theCurrentZip)
})[0]
}
console.log(getCity("7"))
console.log(getCity("2"))
console.log(getCity("99"))