映射数组javascript时出现问题
因此,我试图构建一个图表作为网络组件,但在映射数组时遇到了一些问题。错误显示:this.values.map不是函数 代码如下:映射数组javascript时出现问题,javascript,polymer,lit-html,Javascript,Polymer,Lit Html,因此,我试图构建一个图表作为网络组件,但在映射数组时遇到了一些问题。错误显示:this.values.map不是函数 代码如下: import {LitElement, html, css} from 'lit-element'; class ApexChart extends LitElement { static get properties(){ return{ values: {Array}, labels: {Array} }; }
import {LitElement, html, css} from 'lit-element';
class ApexChart extends LitElement {
static get properties(){
return{
values: {Array},
labels: {Array}
};
}
constructor(){
super();
this.values = [];
this.labels =[];
}
static get styles(){
return css `
`;
}
render(){
return html`
<p>${this.values.map(value => {value + 1})}</p>
`;
}
}
customElements.define('apex-chart', ApexChart);
从'lit element'导入{LitElement,html,css};
类ApexChart扩展了LitElement{
静态获取属性(){
返回{
值:{Array},
标签:{Array}
};
}
构造函数(){
超级();
这个值为[];
this.labels=[];
}
静态获取样式(){
返回css`
`;
}
render(){
返回html`
${this.values.map(value=>{value+1})}
`;
}
}
自定义元素。定义('apex-chart',ApexChart);
我正在传递html中的值
<apex-chart values="[1,2,3,4]" labels="['Hi', 'Hello', 'Oi', 'Hola']"></apex-chart>
我看不出我做错了什么你有两个问题:
1) 属性的定义不正确。应该是:
static get properties(){
return{
values: { type: Array },
labels: { type: Array }
};
}
2) 映射方法无法正常工作。当前它返回未定义的值,因为如果使用{}
必须使用返回
关键字
> [0, 1].map(value => { value + 1 })
<- (2) [undefined, undefined]
[0,1]。映射(值=>{value+1})
值+1)}
`;
}
或:
render(){
返回html`
${this.values.map(value=>{return value+1;})}
`;
}
我没有使用Polymer,但是您是否应该只访问值而不是this.values
?map
语法错误:它应该是this.values.map(value=>value+1)
或this.values.map(value=>{return value+1})
更改了它,但错误仍然存在。如果我更改为值而不是此。值表示未定义值,您可以在返回html之前添加控制台.log(this.values)
并检查值。另外,this
insiderender
是否引用了ApexChart
的实例。花了一些时间测试代码后,我发现了问题。似乎我不能这样传递数组,因为数组被理解为字符串。但如果我通过下面的方法,它会将correct理解为一个对象数组。有什么想法吗?非常感谢
values=“[1]”“
和values='[[[“Hi”,1]]”“
都是数组,将以相同的方式反序列化。它们只是具有不同的值。
render(){
return html`
<p>${this.values.map(value => value + 1)}</p>
`;
}
render(){
return html`
<p>${this.values.map(value => { return value + 1; })}</p>
`;
}