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

当传递返回es6字符串的函数时,Angular - ngStyle返回[object Object]

当传递返回ES6字符串的函数时,Angular - ngStyle返回"[object Object]"是因为在ngStyle指令中,需要传递一个对象作为参数来设置样式。如果传递的是一个返回ES6字符串的函数,那么该函数会被调用并返回一个字符串,而不是一个对象。因此,ngStyle会将这个字符串转换为一个对象字符串,并将其显示为"[object Object]"。

为了解决这个问题,我们可以使用一个返回对象的函数作为ngStyle的参数,而不是一个返回字符串的函数。例如,假设我们有一个返回颜色名称的函数:

代码语言:txt
复制
getColor(): string {
  return 'red';
}

我们可以将这个函数的结果与ngStyle指令一起使用:

代码语言:txt
复制
<div [ngStyle]="{ 'color': getColor() }">Hello World</div>

这样,ngStyle会接收到一个对象,其中键为'color',值为函数返回的字符串。这样就能正确地设置样式为红色。

关于腾讯云相关产品,推荐使用腾讯云云服务器(CVM)作为服务器运维的解决方案。腾讯云云服务器提供了灵活的计算能力和丰富的配置选项,适用于各种应用场景。您可以通过以下链接了解更多腾讯云云服务器的信息:

腾讯云云服务器产品介绍:https://cloud.tencent.com/product/cvm

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

相关·内容

Angular2 返回组件生命周期函数不被调用解决方法

这两天使用 Angular2 遇到一个 @angular/router bug: 症状 @angular/router 版本 3.0.0-beta.2 使用 safari 浏览器,iOS 都可以...打开 Angular2 官方范例项目 点击导航栏上 Heroes 转到 Heroes 列表页面 后退回到 Dashboard 页面,正常情况下应该有的四个 Heroes 没有出现 桌面 safari...或 iOS 都可以,使用 router 导航到一个新页面,然后后退,原页面 Component 生命周期函数不会被调用,导致页面表现不正常。...解决方法 已经有人修复了:fix(router): back button does not work in IE11 and Safari 但至本文成文还没有更新到最新 router npm 模块里...临时应急的话可以自行修改项目目录下node_modules/@angular/router/src/router.js 282 和 284 行即可 this.locationSubscription

1.8K40
  • ES7、ES8新特性

    而在最新ES8版本中,新增特性比较多,主要包括:Object.values/Object.entries、字符串填充、Object.getOwnPropertyDescriptor、尾随逗号、异步函数...在ES6,要检查是否存在值,你需要做一些判断,因为他们没有匹配到值,Array.prototype.indexOf返回-1变成了true(转换成true),但是匹配元素为0位置时候,该数组包含元素,...for/in也许会非常好用,但是它碰到迭代枚举属性,会破坏像prototype和tostring属性得到意想不到值。...Object.entries(x)强制转换x为对象,并以数组方式返回其可枚举自定义字符串。...可以从头到尾读起来非常简单和易懂,因为出现结果顺序和函数题中从头到尾顺序一样啊! 共享内存与原子操作 内存被共享,多个线程可以并发读、写内存中相同数据。

    3.5K50

    ES7和ES8新特性介绍

    而在最新ES8版本中,新增特性比较多,主要包括:Object.values/Object.entries、字符串填充、Object.getOwnPropertyDescriptor、尾随逗号、异步函数...在ES6,要检查是否存在值,你需要做一些判断,因为他们没有匹配到值,Array.prototype.indexOf返回-1变成了true(转换成true),但是匹配元素为0位置时候,该数组包含元素,...for/in也许会非常好用,但是它碰到迭代枚举属性,会破坏像prototype和tostring属性得到意想不到值。...Object.entries(x)强制转换x为对象,并以数组方式返回其可枚举自定义字符串。...可以从头到尾读起来非常简单和易懂,因为出现结果顺序和函数题中从头到尾顺序一样啊! 共享内存与原子操作 内存被共享,多个线程可以并发读、写内存中相同数据。

    5.5K60

    重温 ES6 Symbol

    Symbol 特性 1.Symbol 通过工厂函数创建,不能以 new 方式创建,所以使用 instanceof 运算符返回结果为 false var sym = Symbol(); var sym1...// TypeError 6.Symbol 工厂函数返回 symbol,可作为对象属性名,可以避免属性冲突,在 for...in 迭代中不可枚举 var obj = {}; obj[Symbol(...["c"] = "c"; obj.d = "d"; for (var i in obj) { console.log(i); // logs "c" and "d" } 7.Symbol 工厂函数返回值...'.search('ng') // 4 该示例执行流程: 解析 'angular'.search('ng') 把 ‘angular’ 转换为字符串对象 new String('angular') 把...) 语句 把 ‘Angular7’ 转换为字符串对象 new String("Angular7") 由于 article 是对象,这里不需要进行转换 调用 ‘Angular7’ 字符串对象 search

    92120

    ES6、ES7、ES8学习指南

    所以说,函数参数默认值不仅能是代码变得更加简洁而且能规避一些问题。 5.模板字符串 ES6支持模板字符串,使得字符串拼接更加简洁、直观。...大部分情况下在外部使用都应显示传递 props 。但是传递大量props,会非常繁琐,这时我们可以使用 ...(延展操作符,用于取出参数对象所有可遍历属性) 来进行传递。...() Object.values()是一个与Object.keys()类似的新函数,但返回Object自身属性所有值,不包括继承值。...3.Object.entries Object.entries()函数返回一个给定对象自身可枚举属性键值对数组。...函数原型: Object.getOwnPropertyDescriptors(obj) 返回obj对象所有自身属性描述符,如果没有任何自身属性,则返回空对象。

    1.6K40

    JavaScript 又出新特性了?来看看这篇就明白了

    所以说, 函数参数默认值不仅能是代码变得更加简洁而且能规避一些问题。 5.模板字符串 ES6 支持 模板字符串,使得字符串拼接更加简洁、直观。...大部分情况下在外部使用都应显示传递 props 。但是传递大量 props ,会非常繁琐,这时我们可以使用 ...(延展操作符,用于取出参数对象所有可遍历属性) 来进行传递。...() Object.values()是一个与 Object.keys()类似的新函数,但返回Object 自身属性所有值,不包括继承值。...3.Object.entries() Object.entries()函数返回一个给定对象自身可枚举属性键值对数组。...Object.fromEntries() Object.entries()方法作用是返回一个给定对象自身可枚举属性键值对数组,其排列与使用 for...in 循环遍历该对象返回顺序一致(区别在于

    1.6K20

    前端面试题库系列(4)

    try catch里面有什么结果 Promise 对象错误具有冒泡性质,会一直向后传递,直到被捕获为止,也即是说,错误总会被下一个catch语句捕获 Promise链中抛出一个错误时,错误信息沿着链路向后传递...ES6模块与CommonJS模块差异 CommonJs 模块输出是一个值拷贝,ES6模块输出是一个值引用 CommonJS 模块是运行时加载,ES6模块是编译输出接口 ES6输入模块变量...try catch里面有什么结果 Promise 对象错误具有冒泡性质,会一直向后传递,直到被捕获为止,也即是说,错误总会被下一个catch语句捕获 Promise链中抛出一个错误时,错误信息沿着链路向后传递...ES6模块与CommonJS模块差异 CommonJs 模块输出是一个值拷贝,ES6模块输出是一个值引用 CommonJS 模块是运行时加载,ES6模块是编译输出接口 ES6输入模块变量...()()*/ // 7、编写方法mySum,调用mySun(1,2)跟mySun(1)(2)返回3。

    1.3K10

    前端相关片段整理——持续更新

    ES6 箭头函数 字符串模板 generators(生成器) async/await 解构赋值 class 引入module模块概念 1.1....、p2、p3状态都变成fulfilled,p状态才会变成fulfilled,此时p1、p2、p3返回值组成一个数组,传递给p回调函数。...只要p1、p2、p3之中有一个被rejected,p状态就变成rejected,此时第一个被reject实例返回值,会传递给p回调函数。...):已加载组件收到新参数时调用 shouldComponentUpdate(object nextProps, object nextState):判断是否重新渲染时调用 3.3. angular 特性...每个执行环境都有一个与之关联变量对象,环境中定义所有变量和函数都保存在这个对象中 访问一个变量,解释器会首先在当前作用域查找标示符,如果没有找到,就去父作用域找,直到找到该变量标示符或者不再存在父作用域了

    1.4K10

    Angular 从入坑到挖坑 - 组件食用指南

    需要使用这个组件,直接在页面上添加选择器对应标签就可以了 ?...,可以使用管道对于表达式结果进行转换 管道是一种简单函数,它们接受输入值并返回转换后值。...,添加了三个特殊运算符 管道运算符 管道是一种特殊函数,可以把运算符(|)左边数据转换成期望呈现给视图数据格式,例如,将时间进行格式化、将数据转换成 json 字符串形式等等 可以针对一个数据使用多个管道进行串联...传递方法,绑定在子组件上属性是父组件方法名称,此处不能加 () ,否则就会直接执行该父组件方法 在传递数据给子组件,也可以通过 this 来指代父组件,从而将整个父组件作为数据绑定子组件上...五、组件生命周期钩子函数 angular 在创建、更新、销毁组件都会触发组件生命周期钩子函数,通过在组件中实现这些生命周期函数,从而介入到这些关键时刻 钩子函数 触发时机 ngOnChanges

    15.8K30

    从 JavaScript 发展历史中聊 ECMAScript(ES6-ES11) 新功能

    所以说, 函数参数默认值不仅能是代码变得更加简洁而且能规避一些问题。 5.模板字符串 ES6支持 模板字符串,使得字符串拼接更加简洁、直观。...大部分情况下在外部使用都应显示传递 props 。但是传递大量props,会非常繁琐,这时我们可以使用 ...(延展操作符,用于取出参数对象所有可遍历属性) 来进行传递。...() Object.values()是一个与 Object.keys()类似的新函数,但返回Object自身属性所有值,不包括继承值。...Object.fromEntries() Object.entries()方法作用是返回一个给定对象自身可枚举属性键值对数组,其排列与使用 for...in 循环遍历该对象返回顺序一致(区别在于...var level = (user.data && user.data.level) || '暂无等级'; 在 JS 中,空字符串、0 等,进行逻辑操作符判断,会自动转化为 false。

    6.8K51

    前端面试知识点

    原生代码 媒体查询 bootstrap等框架 jsonp原理 允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己函数来自动处理返回数据了...闭包 一个可以访问另一个函数变量函数一个函数返回值是另外一个函数,而返回那个函数如果调用了其父函数内部变量,且返回这个函数在外部被执行就产生了闭包。...window 对象 构造函数 call/apply es6有哪些新特性 let const 箭头函数 展开符 解构赋值 对象语法糖 字符串模板 webpack相关配置属性 入口出口文件: entry:...对象间存在一对多关系,这个对象状态发生改变,则会自动通知它依赖对象,进行广播通知。 比如:vue中子组件向父组件传值,子组件使用$emit自定义一个事件名称,父组件接收这个事件即可。...slot 内容插槽 v-forkey作用 v-for渲染列表结构采用“就地复用”策略,也就说数据重新排列数据,会复用已在页面渲染好元素,不会移动 DOM 元素来匹配数据项顺序,这种模式是高效

    1.6K10

    新鲜出炉8月前端面试题

    中 4 种常见内存泄露陷阱 babel把ES6转成ES5或者ES3之类原理是什么 它就是个编译器,输入语言是ES6+,编译目标语言是ES5 babel 官方工作原理 解析:将代码字符串解析成抽象语法树...变换:对抽象语法树进行变换操作 再建:根据变换后抽象语法树再生成代码字符串 Promise 模拟终止 新对象保持“pending”状态,原Promise链将会中止执行。...,会一直向后传递,直到被捕获为止,也即是说,错误总会被下一个catch语句捕获 Promise链中抛出一个错误时,错误信息沿着链路向后传递,直至被捕获 网站性能优化 http 请求方面,减少请求数量,...是通过脏检测实现,angular 会将 UI 事件,请求事件,settimeout 这类延迟,对象放入到事件监测脏队列,数据变化时候,触发 $diget 方法进行数据更新,视图渲染 vue...ES6模块与CommonJS模块差异 CommonJs 模块输出是一个值拷贝,ES6模块输出是一个值引用 CommonJS 模块是运行时加载,ES6模块是编译输出接口 ES6输入模块变量,

    1.1K31

    Vue.js 双向数据绑定基本实现认知

    写在前面 很早一篇博客,整理了部分,蹭假期整理完 博文内容涉及: 双向数据绑定 实现方式简单介绍 基于发布订阅、数据劫持双向数据绑定两种不同实现(ES5/ES6) Demo,以及代码简单分析 Object.defineProperty...在 Vue.js 早期版本中,一个对象被用作数据模型,Vue 会遍历它所有属性,并使用 Object.defineProperty() 将它们转化为getter/setter,以便在数据变化时能够立即感知到...视图需要读取数据模型,getter方法会被调用;视图需要更新数据模型,setter方法会被调用,并且可以在这里触发视图更新。...MVVM Vue.js 双向绑定简单实现 Vue.js 使用了数据劫持(通过Object.defineProperty()、ES6Proxy)和发布者-订阅者模式(通过自定义Dep类和Watcher...}); ES6Proxy 数据劫持 Demo 在 Vue.js 3.0 开始,使用了ES6Proxy来实现数据劫持。

    18620

    面试常考手写代码学习技巧总结

    代码规范遵守 函数名称直接使用功能英文命名(这里你必须知道你要手写函数要实现什么功能) 至于传递参数,还有函数内部声明一些数组,变量等,完全不要考虑太多,可以直接使用arr 和 arr+功能名称...array.slice()); // ["one", "two", "three","four", "five"] console.log(array.slice(2,3)); // ["three"] 浅复制 是指对象被复制.../ ” 5.2 字符串常用函数 split 函数字符串分割称数组 不改变原始字符串 string.split(separator,limit) substr 函数 substr() 方法返回字符串指定位置开始指定数量字符...#substr ” 5.3 对象常用函数 Object.prototype.hasOwnProperty(prop) 该方法仅在目标属性为对象自身属性返回true,而该属性是从原型链中继承而来或根本不存在...,除了IE下节点集合(因为ie下dom对象是以com对象形式实现,js对象与com对象不能进行转换) 第一个参数是context(就是上下文意思),用来替换对象函数this 第二个参数是传递给对象函数参数

    1K20
    领券