首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

选择框不显示angular 10中的选定值,但以angular 8显示,代码相同

在解决这个问题之前,我们首先需要了解一些背景知识。Angular是一种流行的前端开发框架,用于构建单页应用程序。版本号代表了Angular的不同版本,每个版本都有其特定的特性和改进。

针对你提到的问题,选择框不显示Angular 10中的选定值,但在Angular 8中显示,代码相同。这可能是由于Angular版本升级引起的一些变化或问题。下面是一些可能的原因和解决方法:

  1. 版本差异:Angular 10可能对选择框的处理方式有所改变,导致在Angular 8中正常工作的代码在Angular 10中出现问题。你可以查阅Angular的官方文档或版本更新日志,了解在Angular 10中是否有与选择框相关的重大更改。
  2. 语法或API变化:Angular的不同版本可能会引入新的语法或API,或者对现有的语法和API进行更改。你需要检查你的代码,确保在升级到Angular 10时没有使用已被弃用或更改的语法或API。可以参考Angular的官方文档或版本更新日志,查找与选择框相关的语法或API的变化。
  3. 依赖项更新:Angular的升级可能会导致一些依赖项的更新,这些依赖项可能与选择框的显示有关。你可以检查你的项目的依赖项,并确保它们与Angular 10兼容。可以尝试更新相关的依赖项,或者查找是否有与选择框显示相关的已知问题或解决方案。
  4. 数据绑定问题:选择框的选定值可能是通过数据绑定来实现的。你需要检查你的数据绑定逻辑,确保在Angular 10中没有发生任何变化或错误。可以检查绑定的属性、事件处理程序和模板语法,确保它们正确地与选择框相关联。

如果以上方法都没有解决问题,你可以尝试以下步骤来进一步调试和解决问题:

  1. 检查浏览器控制台:在浏览器中打开开发者工具,查看控制台中是否有任何错误或警告信息。这些信息可能会提供有关问题的线索。
  2. 调试代码:使用浏览器的调试工具,逐步执行你的代码,并观察选择框的行为。你可以检查变量的值、函数的执行结果以及事件的触发情况,以找出问题所在。
  3. 搜索社区支持:在Angular的官方论坛、Stack Overflow等开发者社区中搜索类似的问题。可能有其他开发者已经遇到并解决了类似的问题,你可以从他们的经验中获得帮助。

最后,如果你无法解决问题,你可以考虑向Angular的官方支持渠道寻求帮助,例如提交一个问题或寻求技术支持。他们可能能够提供更具体的解决方案或指导。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart4.0 英雄之旅-教程-04明细 顶

在此页面中,您将扩展“Tour of Heroes”应用程序,显示英雄列表,并允许用户选择英雄并显示英雄详细信息。 完成此页面后,该应用应该看起来像这个实例(查看源代码)。...如果您结构匹配,请返回该页面弄清楚您错过了什么。 ? 如果该应用尚未运行,请启动该应用。 当您进行更改时,请通过重新加载浏览器窗口来保持运行。...添加一个点击处理程序来显示选定英雄  你不再需要hero属性,因为你不再显示一个英雄; 你正在显示一个英雄列表。 但是用户可以通过点击选择一个英雄。...' of undefined in [null] 尽管selectedHero.name显示在模板中,必须保留DOM外英雄详细信息,直到出现选定英雄。...当表达式为false时,Angular删除选定类。 ===运算符测试给定对象是否相同。 在模板语法指南中阅读有关[class]绑定更多信息。

3K30

AngularDart4.0 英雄之旅-教程-03英雄编辑器

码云项目页:https://gitee.com/scooplolwiki/toh-1 在这一部分,您将修改起始应用程序显示有关英雄信息。 然后,您将添加编辑英雄信息功能。...', 刷新浏览器,页面将显示标题和英雄名 双大括号是Angular绑定语法。 这些插绑定将组件标题和英雄属性作为字符串显示在HTML标题标签内。...[(ngModel)]="hero.name" ^^^^^^^^^^^^^^^^^^^^^^^ 虽然NgModel是在angular_forms库中定义有效Angular指令,默认情况下不可用。...你走过路 保留你已构建代码 “Tour of Heroes”应用程序使用双重大括号插(一种单向数据绑定)来显示Hero对象应用程序标题和属性。...您还将允许用户选择英雄并显示其详细信息。 您将了解有关如何检索列表并将其绑定到模板更多信息。

3.2K10

如何使用WijmoJS 纯前端设计器,快速生成 Angular 应用

修改后标记缩进样式可能与原始样式匹配,因为它受内置VS代码设置html.format.wrapAttributes控制。...使用Themes命令可以查看选择不同WijmoJS 主题效果,尽管这对生成代码没有影响,该代码仅由控件标记组成。 让我们用趋势线创建一个图表控件。...找到palette属性,单击编辑器中Show Colors按钮,然后选择一个预定义,例如dark。...单击“添加项”链接将新图表系列添加到集合末尾。 单击新添加项目右边缘向下箭头,然后从可用系列类型列表中选择TrendLine。 新添加项目现在显示为[趋势线]。...在这种情况下,设计器斜体显示只读文本绑定。 保存操作期间保留绑定事件; 但是,在设计器中没有用于创建或编辑它们界面。

5.4K40

AngularDart Material Design 输入 顶

(输入类型“number”也使用materialNumberInputDirectives) multiple - 用户是否可以输入多个逗号分隔。...此组件调用者必须提供initial/unfiltered建议列表,这些建议按组件过滤为用户类型。 过滤器区分大小写。...hideCheckbox bool  是否隐藏选择项之前复选框进行多选。...将此设置为true会更改行为,以便在更改选项或选项时:       1.选择第一个选定在选项中有效       2.如果选择没有选定,则选项中没有任何活动 inputText String...Accessor始终设置从输入设置原始String仅在可以解析输入时设置Control。 keypressUpdate属性在每个按键上都有值更新,而默认是仅在模糊事件上更新

5.3K40

AngularDart4.0 指南- 表单 顶

理解这个组件只需要前面几页中介绍Angular概念。 代码导入您刚创建Angular库和Hero模型。...请注意,您还为标记添加了一个ngControl指令,并将其设置为“name”,这对于英雄名字是有意义。 任何唯一将会这样做,使用描述性名称是有帮助。...名称输入是必需,清除它将轮廓变为红色。 这说明有些事情是错用户不知道什么是错,或者该怎么做。 利用控件状态来显示有用消息。...在这个例子中,当控件是有效或者原始时候隐藏消息 - “pristine”意味着用户没有改变这个,因为它是以这种形式显示。 用户体验是开发者选择 有些开发人员希望消息始终显示。...英雄Alter Ego是可选,所以你可以不用关那个。 英雄power选择是必需。 如果需要,可以将相同类型错误消息添加到中,这不是必须,因为选择已经将权限限制为有效

17.5K30

AngularDart4.0 英雄之旅-教程-07路由 顶

导航到英雄细节 虽然所选英雄详细信息显示在HeroesComponent底部,用户应该能够通过以下其他方式导航到HeroDetailComponent: 从仪表板到选定英雄。...英雄名字将显示相同方式。 主要变化是如何得到英雄名字。...选择一个仪表板英雄 当用户选择仪表板中英雄时,应用程序应该导航到HeroDetailComponent允许用户查看和编辑选择英雄。...在HeroesComponent中选择一个英雄 在HeroesComponent中,当前模板展示了一个“主/细节”风格,顶部是英雄列表,下方是选定英雄详细信息。...由于管道运算符(|)之后绑定中包含uppercase管道,英雄名称将以大写字母显示

17.5K30

AngularDart4.0 指南- 用户输入 顶

本节介绍如何绑定到输入按键事件,在每次按键后获取用户输入。 下面的代码监听一个keyup事件,并将整个事件有效载荷($ event)传递给组件事件处理程序。...每次调用之后,onKey()方法将输入附加到组件values属性,后跟一个分隔符(|)。 该模板使用Angular({{...}})来显示属性。...虽然这简化了一些代码使用更具体类型可以揭示事件对象属性并防止愚蠢错误。...代码使用box变量来获取输入元素,并在标签之间进行插显示。 模板是完全独立。 它不绑定到组件,组件什么也不做。 在输入中输入内容,然后观看每个按键显示更新。 ?...虽然该声明没有任何用处,符合Angular要求,所以Angular将更新屏幕。 使用模板引用变量到达输入比通过$ event对象更容易。

3.4K00

AngularDart 4.0 高级-生命周期钩子 顶

Angular提供生命周期挂钩,提供这些关键生命时刻可视性以及发生时行为能力。 指令具有相同生命周期挂钩集,减去特定于组件内容和视图挂钩。...peek-a-boo存在显示Angular如何按预期顺序调用钩子。 此快照反映用户单击“创建...”按钮然后单击“销毁...”按钮后日志状态。 ?...日志条目显示为power属性更改字符串ngOnChanges并没有捕捉到hero.name变化,这一开始令人惊讶。 当输入属性改变时,Angular只会调用钩子。...message changeLog[changeLog.length - 1] = noChangeMsg; } } changeDetected = false; } 此代码检查某些感兴趣...大部分初始检查都是由Angular在页面其他地方首次渲染(与数据无关)而触发。 仅仅通过鼠标移动到另一个输入就会触发一个呼叫。 相对较少调用显示相关数据实际变化。

6.2K10

【JavaScript数据网格】上海道宁51component为你带来企业JS开发人员首选数据网格——AG Grid

这两套代码都可以在 Github 上找到,您可以在其中查看代码并提出问题和拉取请求。开源性质允许社区为 AG Grid 团队提供建议并充当代码审查者。闭源项目没有相同社区支持或知名度。...AG Grid企业级功能01、聚合分组时,您还可以进行聚合获取数据聚合,即总和、最小、最大等。使用内置聚合函数或创建自己聚合函数。02、剪贴板从剪贴板复制和粘贴数据。...例如,您可以为网格中单元格着色,并在 Excel 导出中为等效单元格着色。06、分组行使用分组行将数据分组到选定维度上。您可以将数据设置为按特定列分组,或者允许用户拖放他们选择列并动态分组。...09、范围选择将鼠标拖到单元格上创建范围选择。这对于突出显示数据或复制到剪贴板非常方便。10、设置过滤器Set Filter工作方式与Excel类似,提供复选框从集合中选择。...03、交叉过滤图表 API交叉过滤图表允许用户简单直观方式与数据交互。单击图表元素会自动过滤网格和其他交叉过滤图表中

4.3K40

AngularDart 4.0 高级-管道 顶

介绍Angular管道,这是一种编写显示转换方法,您可以在HTML中声明这些转换。 尝试一下实例(查看源代码)。 使用管道 管道将数据作为输入并将其转换为所需输出。...Flying Heroes应用程序通过复选框开关和附加显示扩展代码帮助您体验这些效果。 ? 替换列表是发信号通知Angular更新显示有效方式。 你什么时候更换清单? 数据发生变化时。...JsonPipe 在前面的代码示例中,第二个提取管道绑定显示了更多管道链接。 它通过链接到内置JsonPipeJSON格式显示相同英雄数据。...纯函数处理输入并返回没有可检测到副作用。 给定相同输入,他们应该总是返回相同输出。 本页前面讨论管道是用纯函数实现。 内置DatePipe是一个纯函数实现纯管道。...下一步 管道是封装和共享常见显示转换好方法。 像样式一样使用它们,将它们放入模板表达式中,丰富视图吸引力和可用性。 在API参考中探索Angular内置管道库。

6.3K20

Angular JS】网站使用社会化评论插件,以及过程中碰到

优点是老牌专业,通过JS代码可发现,国内很多网站功能实现应该是参考了它。缺点同样明显,就是国内网站使用,访问速度个人感觉往往不好,加载有些慢。...缺点是使用过程中我感觉它Bug还是不少,同时在其网站讨论版中,可以看到,提出问题网友很多也很活跃。比如我发现了一个严重问题,也有一些网友提出,就是有时候必须手动再刷新一次页面,才能显示评论。...有言   官网:http://www.uyan.cc/   和多说很像,我没有使用它原因是,发现在使用时它会抛出Javascript error,导致评论不能显示。...因此多次调试没有解决问题后,我选择了放弃。 2. 如何在Angular JS中正确使用评论插件?...针对这个功能,其实每种插件都会提供线程Thread概念,这个功能是指针对不同Thread ID页面加载不同评论。   多说为例。

1.9K80

angularjs学习第七天笔记(系统指令学习)

指令包括:     ng-disabled:主要控制控件是否可操作     ng-readonly:控制文本输入为只读     ng-check:控制选择是否被选中     ng-selected:...1、ng-app:DOM元素将被标记为$rootScope起始点          在JavaScript代码中通过run方法来访问$rootScope。        ...="text/javascript"> var app = angular.module("myApp", []);   5、ng-if :根据条件选择是否加载    ng-if...和ng-show、ng-hide都能够实现标签显示隐藏    但是其有本质区别,ng-if是直接不加载,而后者是通过css样式控制    代码实例:             ng-if...是偶数时值为true     $odd:当$index是奇数时值为true     ng-repeat在数据列表显示中用比较多,在实际使用中可以根据其关键字进行样式设置展示     特别说明:集合数据开始坐标是

2.9K10

Angular 英雄编辑器

CSS 元素选择器 app-heroes 用来在父组件模板中匹配 HTML 元素名称,识别出该组件。...显示 hero 对象 修改模板中绑定,显示英雄名字,并在详情中显示 id 和 name,就像这样: heroes.component.html (HeroesComponent 模板) ...现在,你会发现英雄名字显示成了大写字母。 位于管道操作符( | )右边单词 uppercase 表示是一个插绑定,用于调用内置 UppercasePipe。...编辑英雄 用户应该能在一个  文本输入(textbox)中编辑英雄名字。 当用户输入时,这个输入应该能同时显示和修改英雄 name 属性。...本页中所提及代码如下:https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor 对应文件列表和代码链接如下:

2.5K50

Angular 英雄编辑器

CSS 元素选择器 app-heroes 用来在父组件模板中匹配 HTML 元素名称,识别出该组件。...显示 hero 对象 修改模板中绑定,显示英雄名字,并在详情中显示 id 和 name,就像这样: heroes.component.html (HeroesComponent 模板) ...现在,你会发现英雄名字显示成了大写字母。 位于管道操作符( | )右边单词 uppercase 表示是一个插绑定,用于调用内置 UppercasePipe。...编辑英雄 用户应该能在一个  文本输入(textbox)中编辑英雄名字。 当用户输入时,这个输入应该能同时显示和修改英雄 name 属性。...本页中所提及代码如下:https://github.com/cwiki-us-angular/cwiki-us-angular-tour-of-hero-editor 对应文件列表和代码链接如下:

2.6K70

AngularDart4.0 指南- 模板语法二 顶

Angular首先查看名称是否匹配已知指令事件属性,如下例所示: <!...要监听更改,代码会绑定到输入输入事件。 当用户进行更改时,将引发输入事件,绑定在包含DOM事件对象$event上下文中执行语句。...警惕隐藏大型组件树; NgIf可能是更安全选择。 警惕null ngIf指令通常用于防止null。 显示/隐藏是无用。 如果嵌套表达式试图访问null属性,Angular会抛出一个错误。...例如,您可以将数字显示为货币,强制文本为大写,或筛选列表并对其进行排序。 对于这些小型转换来说,Angular 管道是一个很好选择。 管道是简单函数,它接受一个输入并返回一个转换后。...The title is {{title}} 视图仍然呈现,显示是空白; 你只看到“The title is”没有任何东西。 这是合理行为。 至少该应用程序不会崩溃。

29.9K20

Angular JS】网站使用社会化评论插件,以及过程中碰到

优点是老牌专业,通过JS代码可发现,国内很多网站功能实现应该是参考了它。缺点同样明显,就是国内网站使用,访问速度个人感觉往往不好,加载有些慢。...缺点是使用过程中我感觉它Bug还是不少,同时在其网站讨论版中,可以看到,提出问题网友很多也很活跃。比如我发现了一个严重问题,也有一些网友提出,就是有时候必须手动再刷新一次页面,才能显示评论。...有言     官网:http://www.uyan.cc/     和多说很像,我没有使用它原因是,发现在使用时它会抛出Javascript error,导致评论不能显示。...因此多次调试没有解决问题后,我选择了放弃。 2. 如何在Angular JS中正确使用评论插件?...针对这个功能,其实每种插件都会提供线程Thread概念,这个功能是指针对不同Thread ID页面加载不同评论。   多说为例。

1.6K00

AngularDart4.0 英雄之旅-教程-08HTTP 顶

这个特定内存web API示例返回一个具有data属性对象。 你API可能会返回其他东西。 调整代码匹配您Web API。 调用者不知道你从(模拟)服务器获取英雄。...该代码还包含传播异常给调用者错误,以便调用者可以向用户显示适当错误消息。...()方法之外,删除按钮单击处理程序代码会停止单击事件传播 - 您不希望触发 click处理程序,因为这样做会选择用户将要删除英雄 。...,键入事件绑定将使用新搜索调用组件search()方法。...在仪表板中,在搜索中输入一些文字。 如果你输入字符匹配任何现有的英雄名字,你会看到这样东西。 ? 应用程序结构和代码 查看此页面的实例(查看源代码)中示例源代码。 确认您具有以下结构: ?

11K30

理论 | Angular响应式编程 -- 浅淡 Rx 流式思维

在 Rx 中这种数据转换再容易不过了,最常用一个就是 map 转换操作符,接着上面的代码继续来一个 map 函数,这里使用了 momentjs 按当前日期减去刚刚天数为单位年龄,就得到一个大概估算出生日期...响应式表单中 Rx Angular 表单处理非常强大,有模版驱动表单和响应式表单两类,两种表单各有千秋,在不同场合可以分别使用,甚至混合使用,这里就不展开了。...第二,如果用户采用了拷贝粘贴方式,我们希望同样数据不重复发送,所以滤掉相同数据。...所幸是,Angular 提供了对于响应式编程非常友好设计,我们完全可以不在代码中做订阅或取消订阅动作。那么问题来了,订阅的话,怎么获得呢?答案是 Async 管道。...其实有的时候,写 Rx 不一定很快,一旦业务梳理清楚了,接下来就是几行代码事情。如果你有时候觉得用现有的 Rx 操作符写不出,那多半是你对需求中涉及数据流关系没有弄清楚。

5.2K10
领券