2

我正在尝试从 lit 元素 hasChanged 方法调用一个函数，但它给出了未定义的

static get properties() {
    let dis=this;
    return {
        projeid:{type:Number}, 

        _arr:{type:Array},
        _input_obj: {type: Object},
        _funksiyalar:{type:Object},
        input_objectler_array:
        {
            type:Array,
            hasChanged:function(newVal,oldVal){

                console.log(dis._funksiyalar);
                return true;
            }
        }
    }
}

constructor() {
    super();

    this._arr = ["No:", "Aciqlama", "Vahid", "Miqdar", "Vahidin Qiymeti", "Toplam"];
    this._input_obj=this._arr.reduce((o, key) => Object.assign(o, {[key]: ""},{detaylar:[]}), {});
    this.input_objectler_array=[];

    this._funksiyalar={
        Objectler_Array_hasChanged(newVal) {
            let event = new CustomEvent("array-updated", {
                detail: {
                    array: newVal
                }
            });
            this.dispatchEvent(event);
        }
    };


}

我如何从 lit-element hasChanged 方法中获取属性或方法？

4

1 回答 1

1

hasChanged在集合上立即并同步调用，因此在您的constructor：

this.input_objectler_array=[];
// hasChanged fires, this._funksiyalar is undefined

this._funksiyalar={...

_funksiyalar 您应该能够通过定义first来解决这个问题；

this._funksiyalar={...
this.input_objectler_array=[];
// hasChanged fires, this._funksiyalar is now set

Lit 使用 aProxy创建属性集方法，所以就好像你有类似的东西：

_internalVal;

set input_objectler_array(v) {
    const hasChanged = function(newVal,oldVal){
        console.log(dis._funksiyalar);
        return true;
    };

    if(hasChanged(v, this._internalVal)) {
        this._internalVal = v;
        this.requestUpdate(); // this queues up the change to render
    }
}

List 用于hasChanged确定是否需要更改值，因此将诸如事件之类的副作用挂钩到它是一个坏主意。如果您希望事件可取消或能够更改值，您可以这样做，但如果您想这样做，我建议您自己的自定义set方法或将该逻辑完全移到渲染控件之外（可能使用 a ReactiveController） .

而是在值更改后updated覆盖以触发事件：

updated(changedProperties) {
    if (changedProperties.has('input_objectler_array')) {
        const event = new CustomEvent('array-updated', {
            detail: {
                // component has updated, changedProperties holds the old value
                array: this.input_objectler_array; 
            }
        });
        this.dispatchEvent(event);
    }
}

现在，一旦发生更新，它就会异步updated触发，因此一旦组件连接并在页面中而不是在构造函数中呈现，您的事件就会触发。这将允许程序化创建工作：array-updated

const ele = document.createElement('my-element'); // constructor event fires here
ele.addEventListener('array-updated', doSomething);
containerElement.append(ele); // updated event fires after this
于 2021-05-12T06:47:10.420 回答