如何在 Angular 6 中创建级联下拉列表(国家和州列表)

2023-12-21

如何在 Angular 6 中创建级联下拉列表(国家/地区和州列表)。我想要在 Angular 6 中创建一个完整的国家/地区和州列表。

任何知道这一点的人请分享你的想法。


演示---->级联下拉菜单(国家和州列表) https://stackblitz.com/edit/angular-qvqqgc

HTML:

<label>Country</label>
<div  title="Please select the country that the customer will primarily be served from">
    <select placeholder="Phantasyland" (change)="changeCountry($event.target.value)">
        <option *ngFor ="let count of countryList">{{count.name}} </option>
    </select>
</div>


<label>City</label>
<div title="Please select the city that the customer is primarily to be served from.">
    <select placeholder="Anycity">
        <option *ngFor ="let city of cities">{{city}} </option>
  </select>
</div>

TS:

countryList: Array<any> = [
    { name: 'Germany', cities: ['Duesseldorf', 'Leinfelden-Echterdingen', 'Eschborn'] },
    { name: 'Spain', cities: ['Barcelona'] },
    { name: 'USA', cities: ['Downers Grove'] },
    { name: 'Mexico', cities: ['Puebla'] },
    { name: 'China', cities: ['Beijing'] },
  ];
  cities: Array<any>;
  changeCountry(count) {
    this.cities = this.countryList.find(con => con.name == count).cities;
  }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Angular 6 中创建级联下拉列表(国家和州列表) 的相关文章

  • 验证以防止角度形式出现重复的形式值

    我有几个表单数组 我需要进行验证 以便每个表单行中的特定字段在所有表单数组中必须是唯一的 如果任何值出现多次 则两个表单字段都必须标记为红色 我设法编写了一个函数 以便如果这些字段有任何更改 该函数将返回 true false 但我不确定如
  • 如何将Sinon添加到Angular 2测试中?

    我想添加Sinon进行测试 但无法让它运行 我已经安装了 sinon 和 karma sinon 作为 DevDependency 将 sinon 添加到我的 karma 配置文件中的框架中 frameworks jasmine brows
  • 如何在 Angular 应用程序中动态更改 CSS 类名称?

    我有两个 CSS 类名 如下所示 icon heart color bdbdbd icon heart red color a6b7d4 我的 HTML 包含一个心形图标 div class icon heart div
  • Ionic 4:硬件后退按钮重新加载应用程序

    从事项目并陷入问题 硬件后退按钮重新加载应用程序 我在此应用程序中使用 Angular Router 我退出应用程序的代码 ionViewDidEnter this subscription this platform backButton
  • 为什么使用 MarkForCheck() 和 setTimeout?

    我对 ChangeDetectorRef 中的 MarkForCheck 方法有疑问 对于一种用法我必须使用this cd markForCheck 因为在控制台中我获取了值 但它没有在视图上更新 setTimeout gt this ch
  • 角度材质表-表内边框

    I am using Angular material table and I want to set border inside the table Using CSS I was able to set border Normal ca
  • TemplateRef 中未定义 ElementRef

    在 Angular 中试验 ElementRef TemplateRef ViewRef 和 ViewContainerRef 我已经创建了一个 HTML 模板 我想从那里创建一个视图并将该视图传递给 ViewContainerRef 但它
  • Angular 4 Http POST 不起作用

    我希望每个人都做得很好 我最近开始使用 Angular 4 4 我一直在尝试将数据发布到我的 api 服务器 但不幸的是它不起作用 我花了大约两天的时间 但仍然没有成功 甚至已经尝试过 6 7 篇文章角 io https angular i
  • 找不到管道“货币”(AOT)

    我们有一个从 Angular 6 升级到 7 的 Angular 我们正在使用内置的currency管道 服务时一切正常 ng serve 以及在 DEV 中构建时 但是当我们尝试构建生产我们正在得到The pipe currency co
  • iOS 上的三字母国家代码

    我知道您可以在 iOS 上获取所有国家 地区的两个字母的国家 地区代码 但是有没有办法获得三个字母的国家代码 So from http en wikipedia org wiki ISO 3166 1 alpha 2 http en wik
  • Angular 2发送数组另一页

    我正在使用 Angular 开发天气应用程序 我是 Angular 的新手 我想带上我选择的城市的天气信息 但我无法将数据发送到第二页 哪里有问题 预先感谢您的帮助 export class ForecastComponent implem
  • Angular2 如何对自定义验证器指令进行单元测试?

    我为输入字段编写了一个非常简单的自定义验证器 import Directive from angular core import AbstractControl NG VALIDATORS from angular forms functi
  • 需要在 Visual Studio 2017 中验证 Angular4 和 Angular2

    我已将源代码从 Angularjs 2 升级到 Angularjs 4 我正在使用 Visual Studio 2017 和 ASP NET MVC Core 我现在想验证我使用的是更新版本 4 还是以前的版本 2 这是我的 package
  • 对自定义打字稿错误实例实施instanceof检查?

    打字稿有这个instanceof 检查自定义错误 https github com Microsoft TypeScript issues 13965问题 但尚不清楚我们需要做什么才能得到instanceof在职的 例如对于这个异常我们如何
  • 角度材质自动完成力选择

    在我的 Angular 5 应用程序中 我有一些 matAutocomplete 但我想强制选择其中一个建议 所以我遵循这种方法 堆栈闪电战 https stackblitz com edit autocomplete force sele
  • Ag-grid(Angular 2) 无法访问 CellRenderer 中的组件字段

    我在尝试对使用 cellRenderer 创建的按钮的单击事件调用服务方法时遇到此问题 我正在将 ag grid 与 Angular2 一起使用 headerName Update field update width 80 cellRen
  • Angular 5 中 Observable.ForkJoin 的重复 Http 请求

    我有一个 Angular 5 应用程序 组件中包含以下代码 ngOnInit Observable forkJoin this highlightedInsight this insightService getHighlightedIns
  • 使用 jQuery 和 jQuery UI 运行任何 Jest 测试时出现问题

    所以我有一个名为的开源库Angular Slickgrid https github com ghiscoding Angular Slickgrid还没有测试 我正在尝试使用 Jest 但真的很难使用它 该库是旧的 jQuery 数据网格
  • 在 angular2 视图模板中传递枚举

    我们可以在 angular2 视图模板中使用枚举吗 div class Dropdown div 传递字符串作为输入 enum DropdownType instrument account currency Component selec
  • Angular 2 - 在(点击)事件中使用管道

    我的问题可能很简单 但只是找不到在事件 例如 单击 中使用管道的方法 像这样的事情

随机推荐

  • 如何将字符串从 Haskell 传递到 C?

    我想做的就是将纯文本字符串从 Haskell 传递到 C 但是 它表示 Char 是不可接受的返回类型 我无法在任何地方找到他们认为的原因 也找不到可接受的返回类型 我正在尝试制作一个非常简单的操作系统映像 我可以使用 Qemu 启动它 有
  • 确保容量在 Java 中如何工作?

    StringBuffer buff1 new StringBuffer tuts point System out println Old Capacity of buff1 buff1 capacity buff1 ensureCapac
  • Linux 上的 Swift:迈出第一步

    我对斯威夫特完全陌生 它刚刚作为 Linux 的开源版本发布 我想尝试一下 这是在 ubuntu 14 04 上 clang 已根据先决条件安装
  • 添加过多 ID 对 html / js 渲染性能的影响

    我目前正在进行的一个项目大约有 10 个 UL 每个 UL 包含 10 50 个元素 建议每个元素都有一个指定的唯一 ID 我们将使用它通过 Javascript 更新内容 这看起来需要向页面添加大量 ID 但每个字段都会有一个真实且有意义
  • Flutter 上的简单可扩展列也不会具有“标题”>“可扩展”

    我正在尝试制作一个可扩展的列 也就是说 它有 2 个子项 子项和展开小部件时出现的子项 在下图中 您可以看到子项 蓝色 和展开的子项 红色 它们仅应在Expand gt 单击按钮 一切正常 但无论我做什么 我都无法得到Expand gt 按
  • Oracle 如果行不存在则插入

    insert ignore into table1 select value1 value2 from table2 where table2 type ok 当我运行这个时 我收到错误 缺少 INTO 关键字 当我运行这个时 我收到错误
  • HBase 表上的 SparkSQL

    任何人都直接在 HBase 表上使用 SparkSQL 就像在 Hive 表上使用 SparkSQL 一样 我是spark新手 请指导我如何连接hbase和spark 如何查询hbase表 AFAIK 有 2 种方法连接到 hbase 表
  • iOS - 使用 AVPlayer 检测 URL 流是否正常工作

    这就是我的代码中从 url 播放的样子 private func play let streamUrl let playerItem AVPlayerItem url streamURL radioPlayer AVPlayer playe
  • ls | 的输出厕所-l

    通常输出为wc l命令给出文件中的行数 但是 当我们通过管道输出ls命令它 它似乎正确显示当前工作目录中的文件和目录以及链接的数量 我的问题是输出ls命令在同一行中显示某些文件和目录的名称 那么 为什么在这种情况下使用ls wc l与相比
  • 如何使用 Powershell 更改文件的属性?

    我有一个 Powershell 脚本 可以将文件从一个位置复制到另一个位置 复制完成后 我想清除源位置中已复制的文件的存档属性 如何使用 Powershell 清除文件的 Archive 属性 您可以使用旧的 dos attrib 命令 如
  • 以编程方式更改 ABAddressBook、ABPersonCopyArrayOfAllLinkedPeople 中的链接联系人数组

    是否可以通过编程方式添加 删除 CFArray 返回的联系人ABPersonCopyArrayOfAllLinkedPeople 因此 有效地链接和取消链接来自不同来源的不同联系人记录 以在 iOs 电话簿中显示为 统一 据我所知 至少在
  • 如何在java中打开第2层原始套接字?

    如何在java中打开第2层原始套接字 在 C 中 我们通常使用 AF PACKET 级别来打开具有 sockaddr ll 结构的第 2 层原始套接字 二层编程对应的socket包是什么 使用普通的 Java 方法这是不可能的 因为 Jav
  • 使用 nuxtJS + Vue2-Editor 时如何解决文档未定义错误?

    我正在尝试使用 vue2 editor 设置 nuxtjs 应用程序 如果我尝试通过客户端导航导航到编辑器页面 则其加载但如果我直接访问或刷新 例如 com editor 页面 我收到文档未定义错误 我已经识别出它是因为 vue2 编辑器不
  • 如何交换 observableArray 中的两个项目?

    我有一个按钮 可以将 observableArray 中的项目向左移动一个位置 我正在按照以下方式进行操作 然而 缺点是categories index 被从数组中删除 从而丢弃了该节点上的任何DOM操作 在我的例子中是通过jQuery验证
  • NUnit 异步测试导致 AppDomainUnloadedException

    我有一个带有异步操作的 NET 4 5 WCF 服务 我进行了集成测试 它使用 NetNamedPipeBinding 构建服务主机并通过客户端进行操作 然而 每次这样的测试总是会导致 NUnit 报告以下内容 System AppDoma
  • 在 DBAccess 中关联两个对象

    我正在为我的 iOS 项目使用 dbaccess 如何将数组传递给 dbaccess 对象 例如 我有像这样的 dbobject interface Member DBObject property strong NSString firs
  • 如何发送带有参数的 getForObject 请求 Spring MVC

    我在服务器端有一个方法 它为我提供有关在我的数据库中注册的特定名称的信息 我正在从我的 Android 应用程序访问它 向服务器的请求正常完成 我想做的是根据我想要获取的名称将参数传递给服务器 这是我的服务器端方法 RequestMappi
  • 我应该严格避免在 Android 上使用枚举吗?

    我曾经定义一组相关的常量 例如Bundle在如下界面中组合键 public interface From String LOGIN SCREEN LoginSCreen String NOTIFICATION Notification St
  • C++ 枚举从 0 开始吗​​?

    如果我有一个enum不给枚举分配数字 它的序数值会是 0 吗 例如 enum enumeration ZERO ONE TWO THREE FOUR FIVE SIX SEVEN EIGHT NINE 我已经找到了帖子引用 C99 标准需要
  • 如何在 Angular 6 中创建级联下拉列表(国家和州列表)

    如何在 Angular 6 中创建级联下拉列表 国家 地区和州列表 我想要在 Angular 6 中创建一个完整的国家 地区和州列表 任何知道这一点的人请分享你的想法 演示 gt 级联下拉菜单 国家和州列表 https stackblitz