所以我正在尝试将图表构建为网络组件,但在映射数组时遇到了一些问题。错误提示:this.values.map 不是一个函数
代码如下:
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);
我正在传递来自 html 的值
<apex-chart values="[1,2,3,4]" labels="['Hi', 'Hello', 'Oi', 'Hola']"></apex-chart>
我看不出我做错了什么
最佳答案
你有两个问题:
1) 属性
type converter没有正确定义。应该是:
static get properties(){
return{
values: { type: Array },
labels: { type: Array }
};
}
2) map 方法无法正常工作。目前它返回 undefined
值,因为如果您使用 {}
,则必须使用 return
关键字。
> [0, 1].map(value => { value + 1 })
<- (2) [undefined, undefined]
改为使用:
render(){
return html`
<p>${this.values.map(value => value + 1)}</p>
`;
}
或者:
render(){
return html`
<p>${this.values.map(value => { return value + 1; })}</p>
`;
}
关于javascript - 问题映射数组javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54933374/