Odoo / owl.js 在循环中将属性传递给父组件

Question

这是一个初学者问题，但无法找出错误在哪里，可能是语法。

我尝试渲染对象数组并将道具传递给子组件。 页面上正在渲染子组件，但是子组件中的 this.props.element 是

null

所以，父组件模板是 service_table_view.xml

<t t-foreach="state.elements" t-as='el'>
     <TableElement element="el" />
</t>

service_table_view.js

import {TableElement} from "../service_table_element/service_table_element";

const {Component} = owl;
const {useState} = owl.hooks;

export class TableView extends Component {

    /**
     * @override
     */
    setup() {
        super.setup();

        const elements = [
           
            {
                id: 1,
                type: 'lift',
                isBusy: false,
            },
            {
                id: 2,
                type: 'lift',
                isBusy: false,
            },
            {
                id: 3,
                type: 'alignment',
                isBusy: false,
            },
          
        ]
this.state = useState({elements})

    }


}

Object.assign(TableView, {
    template: 'service.TableView',
    components: {TableElement}
});

子组件 service_table_element.js

export class TableElement extends Component {

    /**
     * @override
     */
    setup() {
        console.log('TABLE ELEMENT', this.props.element); <---- null
        super.setup();


        this.state = useState({
            showDialog: false,
            isBusy: false,
        });
    }
}
Object.assign(TableElement, {
    props: {
        element: {type: Array, element: Object}
    },
    template: 'service.TableElement',
});

当我尝试调用时，在子模板“service_table_element.xml”中发生错误

<t t-esc="props.element.id"/>

，因为 props.element 为 null

Answer 1

您应该调整状态分配来纠正这个问题。

this.state = useState({elements: elements})