动态点击侦听器不在LWC上工作

Question

我一直在尝试将此相关的列表呈现在闪电网络组件上，而唯一不起作用的是单击“侦听器”。

这是相关的LWC JS

    @api recordData;
    @api callLogList = [];
    @track selectedLog;

    @track showAllCallLogs = false;
    @track callChainRecordReference;
    @track recordError;
    @track isLoading = true;
    @track multipleCallLogs = false;

    connectedCallback() {
        this.setup();

        this.callChainRecordReference = {
            type: 'standard__recordPage',
            attributes: {
                recordId: this.recordData.Id,
                objectApiName: 'Call_Log_Chain__c',
                actionName: 'view'
            },
        };
    }

    renderedCallback() {
        if(!this.callLogList[0].setSelected){
            this.setup();
        }
    }

    setup(){
        let callHistory = [];

        console.log(JSON.parse(JSON.stringify(this.callLogList)));
        this.callLogList.forEach(log => {
            // Clone the object and set the setSelected function up for each log
            let tempLog = {...log,
                isSelected: false,
                isResolved: log.Status__c === 'Resolved',
                setSelected: () => {
                    let callLogTempList = [];
                    this.callLogList.forEach(callLog => {
                        if(log.Id === callLog.Id){
                            callLogTempList.push({...callLog, isSelected: true});
                            this.selectedLog = callLog;
                        } else {
                            callLogTempList.push({...callLog, isSelected: false});
                        }
                    });
                    this.callLogList = callLogTempList;
                }};
            if(tempLog.isResolved && !this.isResolved){
                let tempRec = {...this.recordData}
                tempRec.Status__c = "Resolved";
                this.recordData = tempRec;
            }
            callHistory.push(tempLog);
        });

        callHistory.sort((date1, date2) => {
            return new Date(date1.LastModifiedDate) - new Date(date2.LastModifiedDate);
        });

        this.callLogList = callHistory;

        // Select the last log in the list
        this.callLogList[this.callLogList.length - 1].isSelected = true;
        this.selectedLog = this.callLogList[this.callLogList.length - 1];

        if(this.callLogList.length > 1){
            this.multipleCallLogs = true;
        }
    }

相应HTML模板

<!-- Member Call Log Chain Card -->
<template>
    <div class="slds-card slds-card_boundary">
        <div class="slds-card__header slds-grid slds-m-bottom_small">
            <header class="slds-media slds-media_center slds-has-flexi-truncate">
                <div class="slds-media__body">
                    <h2 class="slds-card__header-title">
                        <span onclick={goToCallChainPage} style="cursor:pointer;color: #0000EE;text-decoration: underline">{Name}</span>
                    </h2>
                </div>
                <template if:true={multipleCallLogs}>
                    <template if:true={showAllCallLogs}>
                        <div class="slds-no-flex">
                            <button class="slds-button slds-button_neutral" onclick={showAllCallLogDetails}>Show Selected</button>
                        </div>
                    </template>
                    <template if:false={showAllCallLogs}>
                        <div class="slds-no-flex">
                            <button class="slds-button slds-button_neutral" onclick={showAllCallLogDetails}>Show All</button>
                        </div>
                    </template>
                </template>
            </header>
        </div>

        <div class="slds-card__body slds-card__body_inner">
            <div class="slds-grid slds-grid_align-spread slds-m-bottom_small slds-p-bottom_small slds-border_bottom">
                <div class="slds-col">
                    <template iterator:it={callLogList}>
                        <span key={it.value.Id}>
                            <template if:true={it.value.isSelected}>
                                <lightning-badge label={it.value.Name} class="slds-badge_inverse slds-m-bottom_x-small" style="cursor:pointer" onclick={it.value.setSelected}></lightning-badge>
                            </template>
                            <template if:false={it.value.isSelected}>
                                <lightning-badge label={it.value.Name} class="slds-m-bottom_x-small" style="cursor:pointer" onclick={it.value.setSelected}></lightning-badge>
                            </template>
                            <template if:false={it.last}>
                                <lightning-icon class="slds-m-horizontal_x-small" icon-name="utility:forward" size="x-small"></lightning-icon>
                            </template>
                            <template if:true={it.last}>
                                <template if:false={isResolved}>
                                    <lightning-icon class="slds-m-horizontal_x-small" icon-name="utility:forward" size="x-small"></lightning-icon>
                                    <lightning-badge class="slds-badge_lightest slds-m-bottom_x-small" label="Add to Chain" icon-name="utility:add" style="cursor:pointer" onclick={addToCallChain}></lightning-badge>
                                </template>
                            </template>
                        </span>
                    </template>
                </div>

                <template if:false={isResolved}>
                    <template if:true={isOverdue}>
                        <div class="slds-col">
                            <lightning-badge label={Status} class="slds-theme_error"></lightning-badge>
                        </div>
                    </template>
                    <template if:false={isOverdue}>
                        <div class="slds-col">
                            <lightning-badge label={Status} class="slds-theme_warning"></lightning-badge>
                        </div>
                    </template>
                </template>
                <template if:true={isResolved}>
                    <div class="slds-col">
                        <lightning-badge label={Status} class="slds-theme_success"></lightning-badge>
                    </div>
                </template>
            </div>

            <div class="slds-col">
                <template if:true={showAllCallLogs}>
                    <template for:each={callLogList} for:item="log">
                        <div key={log.Id} class="slds-border_bottom">
                            <c-member_-call-log-card record-data={log}></c-member_-call-log-card>
                        </div>
                    </template>
                </template>
                <template if:false={showAllCallLogs}>
                    <c-member_-call-log-card record-data={selectedLog}></c-member_-call-log-card>
                </template>
            </div>
        </div>
        <template if:true={recordError}>
            <div class="slds-align_absolute-center slds-text-align_center">
                <c-white-glove_-caller-auth-warning-message
                        warning-header="Error getting Call Log"
                        warning-message={recordError}>
                </c-white-glove_-caller-auth-warning-message>
            </div>
        </template>
    </div>
</template>

，这是高级别的 ，我只有一个函数可以循环浏览ID的功能，并将显示的卡设置为上。当从父组件传递列表时，该功能将设置在对象本身上。 （连接回调 - ＆gt; this.setup）。我这样做是因为我不能仅将ID传递给“ SetSelected”函数，因为LWC不支持模板中的参数。在最初的渲染上，一切正常。但是，当我通过从父母那里传递新列表时，唯一的点击侦听器获取是列表中的最后一个。我迷路了，因为这是从连接到渲染的完全相同的代码，并且只有连接给了我我想要的东西。

我缺少什么吗？我一直在倾注文档，找不到任何可以解释这一点的东西。点击侦听器是否仅每连接一次设置一次，然后默默失败？