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

Angular 6 @input() set()不工作。有没有办法让它工作呢?

Angular 6中的@input() set()是用于在父组件中向子组件传递数据的装饰器。它允许父组件将数据绑定到子组件的属性上,并在数据发生变化时触发一个回调函数。

如果@input() set()在Angular 6中不起作用,可能有以下几种原因和解决方法:

  1. 检查父组件是否正确地绑定了子组件的属性。确保在父组件的模板中使用属性绑定语法将数据绑定到子组件的属性上,例如:
  2. 检查父组件是否正确地绑定了子组件的属性。确保在父组件的模板中使用属性绑定语法将数据绑定到子组件的属性上,例如:
  3. 其中,inputData是子组件的属性,parentData是父组件中的数据。
  4. 确保在子组件中正确定义了@input()装饰器。在子组件的类中,使用@input()装饰器将属性标记为输入属性,例如:
  5. 确保在子组件中正确定义了@input()装饰器。在子组件的类中,使用@input()装饰器将属性标记为输入属性,例如:
  6. 这将允许父组件将数据绑定到inputData属性上。
  7. 检查父组件中数据的变化是否会触发@input() set()中的回调函数。当父组件中的数据发生变化时,Angular会自动调用子组件中与@input() set()对应的回调函数。确保在父组件中,当数据发生变化时,相应的属性也会更新。
  8. 如果以上步骤都没有解决问题,可能是由于其他因素导致的。可以尝试重新编译和运行应用程序,或者查看控制台是否有任何错误消息。

总结起来,要让Angular 6中的@input() set()正常工作,需要确保正确地绑定父子组件之间的属性,并在父组件中更新数据时触发相应的回调函数。如果问题仍然存在,可以尝试重新编译和运行应用程序,或者查看控制台是否有任何错误消息。

关于Angular和云计算相关的知识,可以参考腾讯云的文档和产品介绍:

  • Angular官方网站:https://angular.io/
  • 腾讯云云计算产品:https://cloud.tencent.com/product
  • 腾讯云云原生产品:https://cloud.tencent.com/product/tke
  • 腾讯云音视频处理产品:https://cloud.tencent.com/product/mps
  • 腾讯云人工智能产品:https://cloud.tencent.com/product/ai
  • 腾讯云物联网产品:https://cloud.tencent.com/product/iotexplorer
  • 腾讯云移动开发产品:https://cloud.tencent.com/product/mobiledk
  • 腾讯云存储产品:https://cloud.tencent.com/product/cos
  • 腾讯云区块链产品:https://cloud.tencent.com/product/baas
  • 腾讯云元宇宙产品:https://cloud.tencent.com/product/vr
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

AngularDart4.0 高级-属性(Attribute)指令 顶

你的指令工作? 你记得设置@Component的指令属性吗?很容易忘记!...Angular检测到你正试图绑定到某个东西,但是找不到这个指令。 您可以通过在directives列表中列出HighlightDirectiveAngular知道。... Angular知道defaultColor绑定属于HighlightDirective,因为您使用@Input注解将其公开。 刷新浏览器。 编码完成后,下方演示应该如何工作。 ?...因此,组件自己的模板可以绑定到该组件的任何属性,无论有没有@Input注解。 但是组件或指令不应该盲目地信任其他组件和指令。 默认情况下,组件或指令的属性是隐式绑定的。...从Angular绑定角度来看,它们是私密的。当用@Input注解装饰时,该属性从Angular绑定的角度变成公共的。只有这样才能受到其他组件或指令的绑定。

3.2K10

Angular DOM 抽象概述

为我们开发者提供了 元素,在 Angular 内部主要应用在结构指令中,比如 *ngIf、*ngFor 等。...接下来我们先来介绍 TemplateRef,表示可用于实例化内嵌视图的内嵌模板。...: 创建内嵌视图(embedded view) 遍历内嵌视图中的 rootNodes,动态的插入 node 虽然我们已经成功的显示出 template 模板元素中的内容,但发现整个流程还是太复杂了,那有没有简单地方式...那么有没有办法不用创建一个额外的元素?答案是有的,就是使用 元素。...实际工作中,还需要利用 ViewChild、ViewChildren、ContentChild 和 ContentChildren 装饰器,或者基于 Angular 依赖注入特性,通过构造注入的方式,获取相关的对象

3.5K30
  • Angular—都2019了,你还对双向数据绑定念念不忘

    如果你仍然“死缠烂打”的追问倒底有没有,我会告诉你,**没有**。...,这就是很多人念念不忘的双向数据绑定。...Angular中的’双向数据绑定‘ 没有黑魔法 Angular努力拥抱web标准,创造新名词,也不使用什么黑魔法,那么双向绑定是如何实现的?事实上通过属性绑定和事件,这并不难做到。...在不看源码的情况下,如果是你去实现 ngModel 这个指令,相信你肯定有思路。 肯定要把输入属性 ngModel 和input元素的value值关联起来。...肯定是Angular内部帮你做了啊,要不怎么叫简写定法?这些小事框架都不帮忙,要框架何用?当然这只是开个玩笑,如果你愿意的话可以看下源码。

    4.4K30

    看看Angular有啥新玩法!手把手教你在Angular15中集成Excel报表插件

    Angular15新特性 Angular框架(以下简称“Angular”)作为一款由谷歌开发的Web应用程序框架,其强大的依赖注入系统、可重复使用的模块化开发理念和响应式编程模式等特点Angular一问世便取得了巨大的关注和流量...截止目前为止,Angular已经迭代了15个版本,而Angular15又有哪些新的亮眼表现?...Angular15中引入报表插件 大家都知道Excel作为一款统计、分析数据信息的办公软件,在大家日常工作和生活中起到了非常重要的作用。...传统的报表需要从浏览器下载之后再用Excel打开才能修改数据,那么,有没有一种插件可以实现直接在浏览器中修改Excel报表数据?答案是肯定的。...Angular集成报表插件: 新建一个文件夹用来存放工作区代码(文件夹路径最好是英文)。 使用指令初始化Angular工程(用命令提示符CMD输入指令)。

    36320

    Angular(06)- 为什么数据变化,绑定的视图就会自动更新了?

    这里提一点,前端三大框架(Angular,React,Vue)的数据驱动来更新视图的原理,即 MVVM 的实现。 为什么数据发生变化,绑定的视图就会刷新了?...,只需要关心数据的变化工作即可。...vue 要求得声明在 data 中的变量,当变化时才会被追踪到,以更新视图 为什么这些框架会有这些要求,或者说这些规定? 因为需要知道我们到底什么时刻会去对数据进行更新啊。...那么,当我们直接对变量的赋值操作,其实会去执行 set 的内部逻辑,而 vue 只需要在这里就可以获取我们更新数据的时机了。 那么,对于 Angular ?...而 Angular 的原理,类似于被动轮询的模式。也就是,你不知道我什么时候会变化,那么你就在我有可能会变化的情况下,不断的读取我的值,比对一下,看看有没有发生变化。

    1.7K10

    都快2020年,你还没听说过SvelteJS?

    React, Vue和Angular差不多占据了Web开发的大部分江山,可是最近半年Svelte[1]开始逐渐吸引越来越多人的眼球。这个Svelte框架到底有什么过人之处?...那么这些runtime代码到底有多大,可以看一些社区的统计数据[2]: Name Size Ember 2.2.0 435K Ember 1.13.8 486K Angular 2 566K Angular...有没有那种既可以我用接近React和Vue的语法编写代码,同时又不包含框架runtime的办法。...你编写的应用代码在用诸如Webpack和Rollup等工具打包的时候会被直接转换为JavaScript对DOM节点的原生操作,从而bundle.js包含框架的runtime。...不过Svelte会不会因为的先进性而迎来生态大爆发?我们可以拭目以待。

    3.2K10

    关于项目中是否使用Typescript的疑惑与解答

    所以前端选择模块化,一次代码改动影响的页面尽量少。但是即使这样,你依然无法通过鼠标点击测试来运行所有代码,因为你可能还需要测试多种不同的账户。 这样做太麻烦了。...有没有什么办法能让我快速知道「代码有bug没」 这是一个重要的问题:有没有什么办法能让我快速知道「代码有bug没」。 为了说明类型是如何解决这个问题的,我们先来介绍一种最简单的类型:正负数。...万一过几年 TS 火了? 这个问题问得好,前端发展这么快,很多东西都是火几年就不火了,导致后期想招人维护都难(比如 AngularJS 1)。 但是 TS 不存在这个问题。为什么?...如果有一年 TS 火了,上面框架的维护者会提前为你想好升级方案的,你就不必过多担心了。 毕竟背靠大树好乘凉。 JS 岂不是白学了?...结论 快点学 TypeScript 吧,很快就是一线互联网公司面试加分项甚至必备项了。

    1.6K20

    前端三大框架大杂烩

    一、为什么前端会被vue,angular,react瓜分?   不知道大家有没有发现,这三个框架除了都是前端框架之外,还大有搞基的成分存在。...var(当然纯属于开玩笑的)   var关键字,是js的变量声明关键字,可以说,它是js得以运行的核心关键字,因为要想一段代码运行,首先得有各种变量和逻辑判断做支撑,而在es6之前,js能声明变量的,就一个...这三个框架的出现,不仅前端的工作得以高效,也后端省了不少事,比如,路由控制。在以前,干后端是对决要比前端高一个档次的,但现在,完全不一样了。...Angular 用户常常要使用深奥的技术,以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。...Angular2使用ES6的module来定义模块,也考虑了动态加载的需求。 Vue   Vue中指令和组件分得更清晰。

    2.6K50

    受够了!这糟糕的git commit记录

    有没有这么写过 commit 你是否再也无法忍受随意的风格?每次更新版本都不清楚更新了哪些功能?修复了哪些 bug?溯源的时候非常痛苦?不如试试国际知名项目angular.js的提交规范 ?...简单尝试一下 该怎么做?...install -g conventional-changelog npm install -g conventional-changelog-cli 如果报错可切换到淘宝源 npm config set...(即不是新增功能,也不是修改bug的代码变动) test:增加测试 chore:构建过程或辅助工具的变动 footer 展开说明 以 BREAKING CHANGE 开头,后面是变更的具体描述,表示兼容变更...,也没办法规定每个人都安装 node,规范下自己还是可以做到的 小结 npm config set registry https://registry.npm.taobao.org npm install

    91430

    前端三大框架vue,angular,react大杂烩

    一、为什么前端会被vue,angular,react瓜分?    不知道大家有没有发现,这三个框架除了都是前端框架之外,还大有搞基的成分存在。...这三个框架的出现,不仅前端的工作得以高效,也后端省了不少事,比如,路由控制。在以前,干后端是对决要比前端高一个档次的,但现在,完全不一样了。...$watch时只为传递了一个参数,无论作用域中的什么东西发生了变化,这个函数都会被调用。在ng-model中,这个函数被用来检查模型和视图有没有同步,如果没有同步,它将会使用新值来更新模型数据。...Angular 用户常常要使用深奥的技术,以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。...Angular2使用ES6的module来定义模块,也考虑了动态加载的需求。 Vue    Vue中指令和组件分得更清晰。

    3K90

    给Java程序员的Angular快速指南 | 洞见

    ---- 解决方案 —— 全栈式开发 人员架构 该如何解决?克服上述问题的办法就是全栈式开发。也就是说,调整人员架构去适应技术架构。 简单来说:每个人都同时写前端和后端。...他的工作目标是贯穿前后端的价值流,对单个故事进行端到端交付。 但是,要如何克服实现中遇到的技术难题以及保障代码质量?那就要靠团队中的技术专家了。 ?...如果后端很容易实现(但先不必做优化工作),那么就可以不必 Mock,先初步完成后端开发,并前端直接对接真实的后端。先拿这个比 Mock 版原型更逼真一点的原型串起流程,然后再进行优化和打磨工作。...但前端两年一换代的疯狂迭代,以及层出穷的新名词、新工具,仍然难免会后端心生恐惧。不过不用担心,Angular 替你封装了一切,你只需要装上 NodeJS 环境和 Angular CLI 就可以了。...参见: https://angular.cn/guide/user-input 测试 Angular 对测试的支持非常全面,可以实现各个不同层次的测试。 但是不要因为拿到把这么好用的锤子就满世界敲。

    2.4K42

    Vue.js 快速上手精华梳理-为什么选择Vue?

    如果可以的话 我触摸一下吧 它也一样孤独得太久。 不一样的文艺青年,不一样的程序猿。...在成长的过程中,不可避免的会踩一些坑、走一些弯路,那么有没有办法可以避免少踩一些坑、少走一些弯路?万幸的是,答案是有的。...这些领军者,让我们能够看得更远,让我们的工作和生活变得更加简单。我与这些领军者相去甚远,微不足道,但依然希望可以尽自己的一些能力来帮助到一些人,大家可以少走一些弯路、少踩一些坑。...Angular、React 和 Vue 的 GitHub Star 历史: ?...可以看到在 GitHub 上面,Vue 的数据上升最快,并且在 2018 年 6 月 28 日已经超过了 React,成为了最受欢迎的前端框架。

    98630

    一个Angular 5教程:一步一步指导实现你的第一个Angular 5应用程序

    Angular是一个完全集成的框架,可以您快速开始项目工作,无需考虑选择哪个库以及如何处理日常问题。我认为Angular是作为前端的,就像RoR是作为后端的。...另一件要提到的事情是Angular CLI和它的Webpack负责编译TS到JS,所以你不应该IDE为你编译。...让我们回顾的实际工作原理:Angular CLI运行Webpack,它将我们的Angular应用程序编译成JavaScript包并将它们注入到我们的index.html。...这不是Angular指令,它在编译过程中被编译器删除,并被给定语言的翻译所取代。所以我们标记了我们的第一个翻译的消息,但接下来?我们怎么能真正翻译?...正在工作: ? 注意/en/URL中的内容。 综述 祝贺您完成本教程。您现在可以加入其他Angular开发人员的行列。

    42.6K10

    前端三大框架vue,angular,react大杂烩

    一、为什么前端会被vue,angular,react瓜分?    不知道大家有没有发现,这三个框架除了都是前端框架之外,还大有搞基的成分存在。...这三个框架的出现,不仅前端的工作得以高效,也后端省了不少事,比如,路由控制。在以前,干后端是对决要比前端高一个档次的,但现在,完全不一样了。...$watch时只为传递了一个参数,无论作用域中的什么东西发生了变化,这个函数都会被调用。在ng-model中,这个函数被用来检查模型和视图有没有同步,如果没有同步,它将会使用新值来更新模型数据。...Angular 用户常常要使用深奥的技术,以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。...Angular2使用ES6的module来定义模块,也考虑了动态加载的需求。 Vue    Vue中指令和组件分得更清晰。

    2.1K60

    【前端小白向】前端常见名词大盘点

    一段简单的 CSS 就可以页面丰富起来了: body { color: red; } 很多人可能都知道 CSS 这个玩意,用得理所当然,但是你有没有想过,其实 XML 也可以用来表示样式的,比如在...JSONP 上面说到的问题在于:浏览器很难在刷新页面的情况下,向服务器发异步请求来获取内容。 聪明的程序员就开始想:什么东西能发异步请求?...为了 JS 更好地完成服务端开发的工作,前端开发人员把后端开发的一些工具都造了一遍: •连接数据库:mysql, mysql2, mongodb•缓存:session, redis•ORM: TypeORM...但是你有没有想过一个问题:虽然我用最新的语法做开发,但是用户用的可能还是老版本的浏览器呀,这要怎么办?...TypeScript 虽然 ES6 新增的语法和 API 已经大幅提升前端程序员的幸福感了,但是 JavaScript 依然是个弱类型的语言: 类型规范,同事两行泪。

    68130
    领券