Question

我正在尝试从点亮的元素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方法访问属性或方法？

Answer 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 使用 Proxy 来创建属性集方法，所以就好像您有类似的东西：

_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 方法或将该逻辑完全移到渲染控件之外（可能使用 {{ 3}}) 如果你想这样做。

改为覆盖 ReactiveController 以在值更改后触发事件：

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

从hasChanged到达属性

1 个答案: