Polymer 3.x lit元素将数据从一个组件传递到另一个组件

Polymer 3.x lit元素将数据从一个组件传递到另一个组件,polymer-3.x,lit-element,lit-html,Polymer 3.x,Lit Element,Lit Html,我目前正在学习如何使用lit element v2.0.0-rc。2我有两个组件app.js和list-items.js。在app.js中,我从本地存储中收集数据并将其存储在this.todoList中,然后在我的list-items.js中调用this.todoList,但我遇到的问题是,它不是以数组的形式传递数据,而是以对象的形式传递数据,我试图在我对其进行console.log操作时,在列表项中输出所有我得到的数据。todoList是[object]在我的标记中,它是用标记的点渲染出来的,

我目前正在学习如何使用lit element v2.0.0-rc。2我有两个组件app.js和list-items.js。在app.js中,我从本地存储中收集数据并将其存储在this.todoList中,然后在我的list-items.js中调用this.todoList,但我遇到的问题是,它不是以数组的形式传递数据,而是以对象的形式传递数据,我试图在我对其进行console.log操作时,在列表项中输出所有我得到的数据。todoList是[object]在我的
  • 标记中,它是用标记的点渲染出来的,但没有数据。我想知道我是否能得到一些帮助来理解为什么会发生这种情况。这是我的密码 app.js ''' 从'lit element'导入{LitElement,html}; 导入“/”添加项“; 导入“/”列表项“

    class TodoApp extends LitElement{
    
    static get properties(){
        return{
            todoList: Array
        }
    }
    
    constructor(){
        super();
        let list = JSON.parse(localStorage.getItem('todo-list'));
        this.todoList = list === null ? [] : list;
    
    }
    
    render(){
        return html `
        <h1>Hello todo App</h1> 
        <add-item></add-item>  
        <list-items todoList=${this.todoList}></list-items>     
        `;
        }
    }
    
    customElements.define('todo-app', TodoApp)
    
    list-items.js
    import { LitElement, html } from 'lit-element';
    import {repeat} from 'lit-html/directives/repeat.js';
    import './todo-item';
    
    class ListItems extends LitElement {
    static get properties(){
        return{
            todoList: Array
        }
    }
    
    constructor(){
        super();
        this.todoList = [];
    
    }
    
    render(){
        console.log(this.todoList)
        return html `
            <ul>${repeat(this.todoList, (todo) => html`<todo-item 
    todoItem=${todo.item}></todo-item`)}</ul>
        `;
        }
    }
    
    customElements.define('list-items', ListItems);
    '''
    
    类TodoApp扩展了LitElement{
    静态获取属性(){
    返回{
    todoList:数组
    }
    }
    构造函数(){
    超级();
    let list=JSON.parse(localStorage.getItem('todo-list');
    this.todoList=list==null?[]:list;
    }
    render(){
    返回html`
    你好todo应用程序
    `;
    }
    }
    自定义元素。定义('todo-app',TodoApp)
    list-items.js
    从'lit element'导入{LitElement,html};
    从'lit html/directions/repeat.js'导入{repeat};
    导入“./todo项”;
    类ListItems扩展了LitElement{
    静态获取属性(){
    返回{
    todoList:数组
    }
    }
    构造函数(){
    超级();
    this.todoList=[];
    }
    render(){
    console.log(this.todoList)
    返回html`
    
      ${repeat(this.todoList,(todo)=>html`属性始终是文本。因为
      todoList
      是一个数组,它是一个属性,而不是属性。请尝试作为属性绑定:
      .todoList=“${this.todoList}”
      。请参见

      萨德感谢您的帮助,这回答了我的问题,我在过程中学到了更多,当这种情况发生时总是很好。再次感谢您,就像您完成了我正在做的相同教程一样。您完成过代码吗?是的,我完成了,我遵循了萨德给出的答案。