AMA*_*N N 4 country select typescript angular
我正在开发一个电子商务项目，该项目需要登录，需要为移动登录选择国家/地区代码。是否有任何角度包可以为我提供带有标志的国家/地区选择下拉菜单？
注意：标志是很好的功能，如果没有也没有问题，我需要一个国家/地区选择下拉菜单。我的项目在 Angular 7 中运行，因此请提供与 Angular 7 兼容的包。
AMA*_*N N 17
我决定创建自己的下拉菜单，我将在这里发布我的代码。这是任何人都可以将其复制粘贴到您的角度应用程序中的基本方法。我将在不久的将来发布一个相同的软件包。
\n因此，我通过创建新文件将数据与主代码隔离。
\n在任何地方创建一个新的 .ts 文件，我更喜欢在 src/app/shared/model/ 中
\nexport interface Countries {\n code: string\n code3: string\n name: string\n number: string\n}\n现在创建另一个 .ts 文件来存储数据，我更喜欢它在 src/app/shared/components/store/ 中
\nimport { Countries } from 'src/app/shared/models/country.model';\n\nexport var countries: Countries [] = [\n { code: "AF", code3: "AFG", name: "Afghanistan", number: "004" },\n { code: "AL", code3: "ALB", name: "Albania", number: "008" },\n { code: "DZ", code3: "DZA", name: "Algeria", number: "012" },\n { code: "AS", code3: "ASM", name: "American Samoa", number: "016" },\n { code: "AD", code3: "AND", name: "Andorra", number: "020" },\n { code: "AO", code3: "AGO", name: "Angola", number: "024" },\n { code: "AI", code3: "AIA", name: "Anguilla", number: "660" },\n { code: "AQ", code3: "ATA", name: "Antarctica", number: "010" },\n { code: "AG", code3: "ATG", name: "Antigua and Barbuda", number: "028" },\n { code: "AR", code3: "ARG", name: "Argentina", number: "032" },\n { code: "AM", code3: "ARM", name: "Armenia", number: "051" },\n { code: "AW", code3: "ABW", name: "Aruba", number: "533" },\n { code: "AU", code3: "AUS", name: "Australia", number: "036" },\n { code: "AT", code3: "AUT", name: "Austria", number: "040" },\n { code: "AZ", code3: "AZE", name: "Azerbaijan", number: "031" },\n { code: "BS", code3: "BHS", name: "Bahamas (the)", number: "044" },\n { code: "BH", code3: "BHR", name: "Bahrain", number: "048" },\n { code: "BD", code3: "BGD", name: "Bangladesh", number: "050" },\n { code: "BB", code3: "BRB", name: "Barbados", number: "052" },\n { code: "BY", code3: "BLR", name: "Belarus", number: "112" },\n { code: "BE", code3: "BEL", name: "Belgium", number: "056" },\n { code: "BZ", code3: "BLZ", name: "Belize", number: "084" },\n { code: "BJ", code3: "BEN", name: "Benin", number: "204" },\n { code: "BM", code3: "BMU", name: "Bermuda", number: "060" },\n { code: "BT", code3: "BTN", name: "Bhutan", number: "064" },\n { code: "BO", code3: "BOL", name: "Bolivia (Plurinational State of)", number: "068" },\n { code: "BQ", code3: "BES", name: "Bonaire, Sint Eustatius and Saba", number: "535" },\n { code: "BA", code3: "BIH", name: "Bosnia and Herzegovina", number: "070" },\n { code: "BW", code3: "BWA", name: "Botswana", number: "072" },\n { code: "BV", code3: "BVT", name: "Bouvet Island", number: "074" },\n { code: "BR", code3: "BRA", name: "Brazil", number: "076" },\n { code: "IO", code3: "IOT", name: "British Indian Ocean Territory (the)", number: "086" },\n { code: "BN", code3: "BRN", name: "Brunei Darussalam", number: "096" },\n { code: "BG", code3: "BGR", name: "Bulgaria", number: "100" },\n { code: "BF", code3: "BFA", name: "Burkina Faso", number: "854" },\n { code: "BI", code3: "BDI", name: "Burundi", number: "108" },\n { code: "CV", code3: "CPV", name: "Cabo Verde", number: "132" },\n { code: "KH", code3: "KHM", name: "Cambodia", number: "116" },\n { code: "CM", code3: "CMR", name: "Cameroon", number: "120" },\n { code: "CA", code3: "CAN", name: "Canada", number: "124" },\n { code: "KY", code3: "CYM", name: "Cayman Islands (the)", number: "136" },\n { code: "CF", code3: "CAF", name: "Central African Republic (the)", number: "140" },\n { code: "TD", code3: "TCD", name: "Chad", number: "148" },\n { code: "CL", code3: "CHL", name: "Chile", number: "152" },\n { code: "CN", code3: "CHN", name: "China", number: "156" },\n { code: "CX", code3: "CXR", name: "Christmas Island", number: "162" },\n { code: "CC", code3: "CCK", name: "Cocos (Keeling) Islands (the)", number: "166" },\n { code: "CO", code3: "COL", name: "Colombia", number: "170" },\n { code: "KM", code3: "COM", name: "Comoros (the)", number: "174" },\n { code: "CD", code3: "COD", name: "Congo (the Democratic Republic of the)", number: "180" },\n { code: "CG", code3: "COG", name: "Congo (the)", number: "178" },\n { code: "CK", code3: "COK", name: "Cook Islands (the)", number: "184" },\n { code: "CR", code3: "CRI", name: "Costa Rica", number: "188" },\n { code: "HR", code3: "HRV", name: "Croatia", number: "191" },\n { code: "CU", code3: "CUB", name: "Cuba", number: "192" },\n { code: "CW", code3: "CUW", name: "Cura\xc3\xa7ao", number: "531" },\n { code: "CY", code3: "CYP", name: "Cyprus", number: "196" },\n { code: "CZ", code3: "CZE", name: "Czechia", number: "203" },\n { code: "CI", code3: "CIV", name: "C\xc3\xb4te d'Ivoire", number: "384" },\n { code: "DK", code3: "DNK", name: "Denmark", number: "208" },\n { code: "DJ", code3: "DJI", name: "Djibouti", number: "262" },\n { code: "DM", code3: "DMA", name: "Dominica", number: "212" },\n { code: "DO", code3: "DOM", name: "Dominican Republic (the)", number: "214" },\n { code: "EC", code3: "ECU", name: "Ecuador", number: "218" },\n { code: "EG", code3: "EGY", name: "Egypt", number: "818" },\n { code: "SV", code3: "SLV", name: "El Salvador", number: "222" },\n { code: "GQ", code3: "GNQ", name: "Equatorial Guinea", number: "226" },\n { code: "ER", code3: "ERI", name: "Eritrea", number: "232" },\n { code: "EE", code3: "EST", name: "Estonia", number: "233" },\n { code: "SZ", code3: "SWZ", name: "Eswatini", number: "748" },\n { code: "ET", code3: "ETH", name: "Ethiopia", number: "231" },\n { code: "FK", code3: "FLK", name: "Falkland Islands (the) [Malvinas]", number: "238" },\n { code: "FO", code3: "FRO", name: "Faroe Islands (the)", number: "234" },\n { code: "FJ", code3: "FJI", name: "Fiji", number: "242" },\n { code: "FI", code3: "FIN", name: "Finland", number: "246" },\n { code: "FR", code3: "FRA", name: "France", number: "250" },\n { code: "GF", code3: "GUF", name: "French Guiana", number: "254" },\n { code: "PF", code3: "PYF", name: "French Polynesia", number: "258" },\n { code: "TF", code3: "ATF", name: "French Southern Territories (the)", number: "260" },\n { code: "GA", code3: "GAB", name: "Gabon", number: "266" },\n { code: "GM", code3: "GMB", name: "Gambia (the)", number: "270" },\n { code: "GE", code3: "GEO", name: "Georgia", number: "268" },\n { code: "DE", code3: "DEU", name: "Germany", number: "276" },\n { code: "GH", code3: "GHA", name: "Ghana", number: "288" },\n { code: "GI", code3: "GIB", name: "Gibraltar", number: "292" },\n { code: "GR", code3: "GRC", name: "Greece", number: "300" },\n { code: "GL", code3: "GRL", name: "Greenland", number: "304" },\n { code: "GD", code3: "GRD", name: "Grenada", number: "308" },\n { code: "GP", code3: "GLP", name: "Guadeloupe", number: "312" },\n { code: "GU", code3: "GUM", name: "Guam", number: "316" },\n { code: "GT", code3: "GTM", name: "Guatemala", number: "320" },\n { code: "GG", code3: "GGY", name: "Guernsey", number: "831" },\n { code: "GN", code3: "GIN", name: "Guinea", number: "324" },\n { code: "GW", code3: "GNB", name: "Guinea-Bissau", number: "624" },\n { code: "GY", code3: "GUY", name: "Guyana", number: "328" },\n { code: "HT", code3: "HTI", name: "Haiti", number: "332" },\n { code: "HM", code3: "HMD", name: "Heard Island and McDonald Islands", number: "334" },\n { code: "VA", code3: "VAT", name: "Holy See (the)", number: "336" },\n { code: "HN", code3: "HND", name: "Honduras", number: "340" },\n { code: "HK", code3: "HKG", name: "Hong Kong", number: "344" },\n { code: "HU", code3: "HUN", name: "Hungary", number: "348" },\n { code: "IS", code3: "ISL", name: "Iceland", number: "352" },\n { code: "IN", code3: "IND", name: "India", number: "356" },\n { code: "ID", code3: "IDN", name: "Indonesia", number: "360" },\n { code: "IR", code3: "IRN", name: "Iran (Islamic Republic of)", number: "364" },\n { code: "IQ", code3: "IRQ", name: "Iraq", number: "368" },\n { code: "IE", code3: "IRL", name: "Ireland", number: "372" },\n { code: "IM", code3: "IMN", name: "Isle of Man", number: "833" },\n { code: "IL", code3: "ISR", name: "Israel", number: "376" },\n { code: "IT", code3: "ITA", name: "Italy", number: "380" },\n { code: "JM", code3: "JAM", name: "Jamaica", number: "388" },\n { code: "JP", code3: "JPN", name: "Japan", number: "392" },\n { code: "JE", code3: "JEY", name: "Jersey", number: "832" },\n { code: "JO", code3: "JOR", name: "Jordan", number: "400" },\n { code: "KZ", code3: "KAZ", name: "Kazakhstan", number: "398" },\n { code: "KE", code3: "KEN", name: "Kenya", number: "404" },\n { code: "KI", code3: "KIR", name: "Kiribati", number: "296" },\n { code: "KP", code3: "PRK", name: "Korea (the Democratic People's Republic of)", number: "408" },\n { code: "KR", code3: "KOR", name: "Korea (the Republic of)", number: "410" },\n { code: "KW", code3: "KWT", name: "Kuwait", number: "414" },\n { code: "KG", code3: "KGZ", name: "Kyrgyzstan", number: "417" },\n { code: "LA", code3: "LAO", name: "Lao People's Democratic Republic (the)", number: "418" },\n { code: "LV", code3: "LVA", name: "Latvia", number: "428" },\n { code: "LB", code3: "LBN", name: "Lebanon", number: "422" },\n { code: "LS", code3: "LSO", name: "Lesotho", number: "426" },\n { code: "LR", code3: "LBR", name: "Liberia", number: "430" },\n { code: "LY", code3: "LBY", name: "Libya", number: "434" },\n { code: "LI", code3: "LIE", name: "Liechtenstein", number: "438" },\n { code: "LT", code3: "LTU", name: "Lithuania", number: "440" },\n { code: "LU", code3: "LUX", name: "Luxembourg", number: "442" },\n { code: "MO", code3: "MAC", name: "Macao", number: "446" },\n { code: "MG", code3: "MDG", name: "Madagascar", number: "450" },\n { code: "MW", code3: "MWI", name: "Malawi", number: "454" },\n { code: "MY", code3: "MYS", name: "Malaysia", number: "458" },\n { code: "MV", code3: "MDV", name: "Maldives", number: "462" },\n { code: "ML", code3: "MLI", name: "Mali", number: "466" },\n { code: "MT", code3: "MLT", name: "Malta", number: "470" },\n { code: "MH", code3: "MHL", name: "Marshall Islands (the)", number: "584" },\n { code: "MQ", code3: "MTQ", name: "Martinique", number: "474" },\n { code: "MR", code3: "MRT", name: "Mauritania", number: "478" },\n { code: "MU", code3: "MUS", name: "Mauritius", number: "480" },\n { code: "YT", code3: "MYT", name: "Mayotte", number: "175" },\n { code: "MX", code3: "MEX", name: "Mexico", number: "484" },\n { code: "FM", code3: "FSM", name: "Micronesia (Federated States of)", number: "583" },\n { code: "MD", code3: "MDA", name: "Moldova (the Republic of)", number: "498" },\n { code: "MC", code3: "MCO", name: "Monaco", number: "492" },\n { code: "MN", code3: "MNG", name: "Mongolia", number: "496" },\n { code: "ME", code3: "MNE", name: "Montenegro", number: "499" },\n { code: "MS", code3: "MSR", name: "Montserrat", number: "500" },\n { code: "MA", code3: "MAR", name: "Morocco", number: "504" },\n { code: "MZ", code3: "MOZ", name: "Mozambique", number: "508" },\n { code: "MM", code3: "MMR", name: "Myanmar", number: "104" },\n { code: "NA", code3: "NAM", name: "Namibia", number: "516" },\n { code: "NR", code3: "NRU", name: "Nauru", number: "520" },\n { code: "NP", code3: "NPL", name: "Nepal", number: "524" },\n { code: "NL", code3: "NLD", name: "Netherlands (the)", number: "528" },\n { code: "NC", code3: "NCL", name: "New Caledonia", number: "540" },\n { code: "NZ", code3: "NZL", name: "New Zealand", number: "554" },\n { code: "NI", code3: "NIC", name: "Nicaragua", number: "558" },\n { code: "NE", code3: "NER", name: "Niger (the)", number: "562" },\n { code: "NG", code3: "NGA", name: "Nigeria", number: "566" },\n { code: "NU", code3: "NIU", name: "Niue", number: "570" },\n { code: "NF", code3: "NFK", name: "Norfolk Island", number: "574" },\n { code: "MP", code3: "MNP", name: "Northern Mariana Islands (the)", number: "580" },\n { code: "NO", code3: "NOR", name: "Norway", number: "578" },\n { code: "OM", code3: "OMN", name: "Oman", number: "512" },\n { code: "PK", code3: "PAK", name: "Pakistan", number: "586" },\n { code: "PW", code3: "PLW", name: "Palau", number: "585" },\n { code: "PS", code3: "PSE", name: "Palestine, State of", number: "275" },\n { code: "PA", code3: "PAN", name: "Panama", number: "591" },\n { code: "PG", code3: "PNG", name: "Papua New Guinea", number: "598" },\n { code: "PY", code3: "PRY", name: "Paraguay", number: "600" },\n { code: "PE", code3: "PER", name: "Peru", number: "604" },\n { code: "PH", code3: "PHL", name: "Philippines (the)", number: "608" },\n { code: "PN", code3: "PCN", name: "Pitcairn", number: "612" },\n { code: "PL", code3: "POL", name: "Poland", number: "616" },\n { code: "PT", code3: "PRT", name: "Portugal", number: "620" },\n { code: "PR", code3: "PRI", name: "Puerto Rico", number: "630" },\n { code: "QA", code3: "QAT", name: "Qatar", number: "634" },\n { code: "MK", code3: "MKD", name: "Republic of North Macedonia", number: "807" },\n { code: "RO", code3: "ROU", name: "Romania", number: "642" },\n { code: "RU", code3: "RUS", name: "Russian Federation (the)", number: "643" },\n { code: "RW", code3: "RWA", name: "Rwanda", number: "646" },\n { code: "RE", code3: "REU", name: "R\xc3\xa9union", number: "638" },\n { code: "BL", code3: "BLM", name: "Saint Barth\xc3\xa9lemy", number: "652" },\n { code: "SH", code3: "SHN", name: "Saint Helena, Ascension and Tristan da Cunha", number: "654" },\n { code: "KN", code3: "KNA", name: "Saint Kitts and Nevis", number: "659" },\n { code: "LC", code3: "LCA", name: "Saint Lucia", number: "662" },\n { code: "MF", code3: "MAF", name: "Saint Martin (French part)", number: "663" },\n { code: "PM", code3: "SPM", name: "Saint Pierre and Miquelon", number: "666" },\n { code: "VC", code3: "VCT", name: "Saint Vincent and the Grenadines", number: "670" },\n { code: "WS", code3: "WSM", name: "Samoa", number: "882" },\n { code: "SM", code3: "SMR", name: "San Marino", number: "674" },\n { code: "ST", code3: "STP", name: "Sao Tome and Principe", number: "678" },\n { code: "SA", code3: "SAU", name: "Saudi Arabia", number: "682" },\n { code: "SN", code3: "SEN", name: "Senegal", number: "686" },\n { code: "RS", code3: "SRB", name: "Serbia", number: "688" },\n { code: "SC", code3: "SYC", name: "Seychelles", number: "690" },\n { code: "SL", code3: "SLE", name: "Sierra Leone", number: "694" },\n { code: "SG", code3: "SGP", name: "Singapore", number: "702" },\n { code: "SX", code3: "SXM", name: "Sint Maarten (Dutch part)", number: "534" },\n { code: "SK", code3: "SVK", name: "Slovakia", number: "703" },\n { code: "SI", code3: "SVN", name: "Slovenia", number: "705" },\n { code: "SB", code3: "SLB", name: "Solomon Islands", number: "090" },\n { code: "SO", code3: "SOM", name: "Somalia", number: "706" },\n { code: "ZA", code3: "ZAF", name: "South Africa", number: "710" },\n { code: "GS", code3: "SGS", name: "South Georgia and the South Sandwich Islands", number: "239" },\n { code: "SS", code3: "SSD", name: "South Sudan", number: "728" },\n { code: "ES", code3: "ESP", name: "Spain", number: "724" },\n { code: "LK", code3: "LKA", name: "Sri Lanka", number: "144" },\n { code: "SD", code3: "SDN", name: "Sudan (the)", number: "729" },\n { code: "SR", code3: "SUR", name: "Suriname", number: "740" },\n { code: "SJ", code3: "SJM", name: "Svalbard and Jan Mayen", number: "744" },\n { code: "SE", code3: "SWE", name: "Sweden", number: "752" },\n { code: "CH", code3: "CHE", name: "Switzerland", number: "756" },\n { code: "SY", code3: "SYR", name: "Syrian Arab Republic", number: "760" },\n { code: "TW", code3: "TWN", name: "Taiwan", number: "158" },\n { code: "TJ", code3: "TJK", name: "Tajikistan", number: "762" },\n { code: "TZ", code3: "TZA", name: "Tanzania, United Republic of", number: "834" },\n { code: "TH", code3: "THA", name: "Thailand", number: "764" },\n { code: "TL", code3: "TLS", name: "Timor-Leste", number: "626" },\n { code: "TG", code3: "TGO", name: "Togo", number: "768" },\n { code: "TK", code3: "TKL", name: "Tokelau", number: "772" },\n { code: "TO", code3: "TON", name: "Tonga", number: "776" },\n { code: "TT", code3: "TTO", name: "Trinidad and Tobago", number: "780" },\n { code: "TN", code3: "TUN", name: "Tunisia", number: "788" },\n { code: "TR", code3: "TUR", name: "Turkey", number: "792" },\n { code: "TM", code3: "TKM", name: "Turkmenistan", number: "795" },\n { code: "TC", code3: "TCA", name: "Turks and Caicos Islands (the)", number: "796" },\n { code: "TV", code3: "TUV", name: "Tuvalu", number: "798" },\n { code: "UG", code3: "UGA", name: "Uganda", number: "800" },\n { code: "UA", code3: "UKR", name: "Ukraine", number: "804" },\n { code: "AE", code3: "ARE", name: "United Arab Emirates (the)", number: "784" },\n { code: "GB", code3: "GBR", name: "United Kingdom of Great Britain and Northern Ireland (the)", number: "826" },\n { code: "UM", code3: "UMI", name: "United States Minor Outlying Islands (the)", number: "581" },\n { code: "US", code3: "USA", name: "United States of America (the)", number: "840" },\n { code: "UY", code3: "URY", name: "Uruguay", number: "858" },\n { code: "UZ", code3: "UZB", name: "Uzbekistan", number: "860" },\n { code: "VU", code3: "VUT", name: "Vanuatu", number: "548" },\n { code: "VE", code3: "VEN", name: "Venezuela (Bolivarian Republic of)", number: "862" },\n { code: "VN", code3: "VNM", name: "Viet Nam", number: "704" },\n { code: "VG", code3: "VGB", name: "Virgin Islands (British)", number: "092" },\n { code: "VI", code3: "VIR", name: "Virgin Islands (U.S.)", number: "850" },\n { code: "WF", code3: "WLF", name: "Wallis and Futuna", number: "876" },\n { code: "EH", code3: "ESH", name: "Western Sahara", number: "732" },\n { code: "YE", code3: "YEM", name: "Yemen", number: "887" },\n { code: "ZM", code3: "ZMB", name: "Zambia", number: "894" },\n { code: "ZW", code3: "ZWE", name: "Zimbabwe", number: "716" },\n { code: "AX", code3: "ALA", name: "\xc3\x85land Islands", number: "248" }\n];\n现在我们已经成功创建了我们的数据存储。现在我们必须将其提取到您想要的任何组件中。为此我们必须导入这个变量。
\nexport class YourComponent implements OnInit {\n \n public countries:any = countries\n \n constructor(){}\n\n ngOnInit(): void {\n\n }\n}\n<select class="form-control" name="country" id="country">\n <option value="" disabled selected>Select Country</option>\n <option *ngFor="let country of countries" [value]="country.name">{{country.name}}</option>\n</select>\n\n我将开发一个包，我们将采用相同但非常简单的方式。
\n感谢和问候
\n| 归档时间： |
|
| 查看次数： |
17984 次 |
| 最近记录： |