首页
学习
活动
专区
工具
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为对象,并以数组的方式返回其可枚举的自定义字符串。...可以从头到尾读起来非常简单和易懂,因为出现结果顺序和函数题中从头到尾顺序一样啊! 共享内存与原子操作 当内存被共享时,多个线程可以并发读、写内存中相同的数据。

    5.5K60

    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

    重温 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

    92420

    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-for的key作用 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()、ES6的Proxy)和发布者-订阅者模式(通过自定义的Dep类和Watcher...}); ES6的Proxy 数据劫持 Demo 在 Vue.js 3.0 开始,使用了ES6的Proxy来实现数据劫持。

    19920

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

    代码规范遵守 函数名称直接使用功能英文命名(这里你必须知道你要手写的函数要实现什么功能) 至于传递的参数,还有函数内部声明的一些数组,变量等,完全不要考虑太多,可以直接使用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 第二个参数是传递给对象函数的参数

    1.1K20
    领券