如何在角度 7 中添加国家/地区选择下拉列表？

如何解决如何在角度 7 中添加国家/地区选择下拉列表？

我正在从事一个需要登录的电子商务项目，其中需要为移动登录选择国家/地区代码。是否有任何角度包可以为我提供带有标志的国家/地区选择下拉列表？

注意：标志是很好的功能，如果不是没有问题，我需要一个国家选择下拉菜单。我的项目在 Angular 7 中运行，所以请提供一个与 Angular 7 兼容的包。

解决方法

我决定创建我自己的下拉菜单，我会在这里发布我的代码。这是任何人都可以将粘贴复制到您的角度应用程序中的基本方法。我将在不久的将来发布相同的软件包。

因此，我通过创建新文件将数据与主代码隔离。

在任何地方创建一个新的 .ts 文件，我更喜欢在 src/app/shared/model/

创建 Country.model.ts

export interface Countries {
    code: string
    code3: string
    name: string
    number: string
}

现在创建另一个 .ts 文件来存储数据，我更喜欢它在 src/app/shared/components/store/

创建 country-data-store.ts

import { Countries } from 'src/app/shared/models/country.model';

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

现在我们已经成功创建了我们的数据存储。现在我们必须把它提取到你想要的任何组件中。为此，我们必须导入这个变量。

在 your-component.ts 中

export class YourComponent implements OnInit {
  
  public countries:any = countries
  
  constructor(){}

  ngOnInit(): void {

  }
}

在你的组件.html

<select class="form-control" name="country" id="country">
     <option value="" disabled selected>Select Country</option>
     <option *ngFor="let country of countries" [value]="country.name">{{country.name}}</option>
</select>

我将制作一个包，我们将采用相同但非常简单的方法。

感谢和问候