我一直在尝试创建土耳其的城市列表，我从api获得城市，检查了数组和数组的正确工作。但是，我不能在选择选项上显示城市。它以空白形式出现，带有一个禁用选项。
<div class="col-md-3">
<select name="city" id="city" formControlName="city">
<option [ngValue]="null" disabled>Select City</option>
<option *ngFor="let city of cities" [ngValue]="city.id">{{city.name}}</option>
</select>
</div>
下面是我获取城市的代码:
cities: City[] = []
constructor(private locationService: LocationService){
locationService.getCities()
.subscribe(res => {
this.cities = res
})
}
它在另一个项目上工作得很好，但在这个项目上不行。我复制了&粘贴它。下面是我的依赖项:
"dependencies": {
"@angular/animations": "~13.0.0",
"@angular/cdk": "~13.3.4",
"@angular/common": "~13.0.0",
"@angular/compiler": "~13.0.0",
"@angular/core": "~13.0.0",
"@angular/forms": "~13.0.0",
"@angular/material": "~13.3.4",
"@angular/platform-browser": "~13.0.0",
"@angular/platform-browser-dynamic": "~13.0.0",
"@angular/router": "~13.0.0",
"@types/jquery": "^3.5.14",
"angular-notifier": "^11.0.0",
"jquery": "^3.6.0",
"ng-recaptcha": "^9.0.0",
"ngx-cookie-service": "^13.2.0",
"rxjs": "~7.4.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-devkit/build-angular": "~13.0.4",
"@angular/cli": "~13.0.4",
"@angular/compiler-cli": "~13.0.0",
"@types/jasmine": "~3.10.0",
"@types/node": "^12.11.1",
"jasmine-core": "~3.10.0",
"karma": "~6.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.0.3",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "~1.7.0",
"typescript": "~4.4.3"
}
以下是我记录订阅城市的结果:
booking.component.ts:89 Array(81)0: {id: 1, name: 'ADANA'}1: {id: 2, name: 'ADIYAMAN'}2: {id: 3, name: 'AFYON'}3: {id: 4, name: 'AĞRI'}4: {id: 5, name: 'AMASYA'}5: {id: 6, name: 'ANKARA'}6: {id: 7, name: 'ANTALYA'}7: {id: 8, name: 'ARTVİN'}8: {id: 9, name: 'AYDIN'}9: {id: 10, name: 'BALIKESİR'}10: {id: 11, name: 'BİLECİK'}11: {id: 12, name: 'BİNGÖL'}12: {id: 13, name: 'BİTLİS'}13: {id: 14, name: 'BOLU'}14: {id: 15, name: 'BURDUR'}15: {id: 16, name: 'BURSA'}16: {id: 17, name: 'ÇANAKKALE'}17: {id: 18, name: 'ÇANKIRI'}18: {id: 19, name: 'ÇORUM'}19: {id: 20, name: 'DENİZLİ'}20: {id: 21, name: 'DİYARBAKIR'}21: {id: 22, name: 'EDİRNE'}22: {id: 23, name: 'ELAZIĞ'}23: {id: 24, name: 'ERZİNCAN'}24: {id: 25, name: 'ERZURUM'}25: {id: 26, name: 'ESKİŞEHİR'}26: {id: 27, name: 'GAZİANTEP'}27: {id: 28, name: 'GİRESUN'}28: {id: 29, name: 'GÜMÜŞHANE'}29: {id: 30, name: 'HAKKARİ'}30: {id: 31, name: 'HATAY'}31: {id: 32, name: 'ISPARTA'}32: {id: 33, name: 'İÇEL'}33: {id: 34, name: 'İSTANBUL'}34: {id: 35, name: 'İZMİR'}35: {id: 36, name: 'KARS'}36: {id: 37, name: 'KASTAMONU'}37: {id: 38, name: 'KAYSERİ'}38: {id: 39, name: 'KIRKLARELİ'}39: {id: 40, name: 'KIRŞEHİR'}40: {id: 41, name: 'KOCAELİ'}41: {id: 42, name: 'KONYA'}42: {id: 43, name: 'KÜTAHYA'}43: {id: 44, name: 'MALATYA'}44: {id: 45, name: 'MANİSA'}45: {id: 46, name: 'KAHRAMANMARAŞ'}46: {id: 47, name: 'MARDİN'}47: {id: 48, name: 'MUĞLA'}48: {id: 49, name: 'MUŞ'}49: {id: 50, name: 'NEVŞEHİR'}50: {id: 51, name: 'NİĞDE'}51: {id: 52, name: 'ORDU'}52: {id: 53, name: 'RİZE'}53: {id: 54, name: 'SAKARYA'}54: {id: 55, name: 'SAMSUN'}55: {id: 56, name: 'SİİRT'}56: {id: 57, name: 'SİNOP'}57: {id: 58, name: 'SİVAS'}58: {id: 59, name: 'TEKİRDAĞ'}59: {id: 60, name: 'TOKAT'}60: {id: 61, name: 'TRABZON'}61: {id: 62, name: 'TUNCELİ'}62: {id: 63, name: 'ŞANLIURFA'}63: {id: 64, name: 'UŞAK'}64: {id: 65, name: 'VAN'}65: {id: 66, name: 'YOZGAT'}66: {id: 67, name: 'ZONGULDAK'}67: {id: 68, name: 'AKSARAY'}68: {id: 69, name: 'BAYBURT'}69: {id: 70, name: 'KARAMAN'}70: {id: 71, name: 'KIRIKKALE'}71: {id: 72, name: 'BATMAN'}72: {id: 73, name: 'ŞIRNAK'}73: {id: 74, name: 'BARTIN'}74: {id: 75, name: 'ARDAHAN'}75: {id: 76, name: 'IĞDIR'}76: {id: 77, name: 'YALOVA'}77: {id: 78, name: 'KARABÜK'}78: {id: 79, name: 'KİLİS'}79: {id: 80, name: 'OSMANİYE'}80: {id: 81, name: 'DÜZCE'}length: 81[[Prototype]]: Array(0)
谢谢你的帮助。
我找到问题了。它与angular无关，它与javascript有关。我使用的模板使用javascript和jquery -不错的选择。它只是变换了我的选择框元素到div，甚至在构造函数出现之前，它不包括我的循环。
谢谢你的帮助!