LWC部署报错LWC1058：含等号的IF语句触发HTML语法错误

问题原因 #

LWC的HTML模板语法不支持在if:true（或if:false）的绑定值里直接写带比较运算符（比如===、>、<=）的表达式，标准HTML解析器会把这些=符号误判为无效的属性语法，从而抛出unexpected-equals-sign-before-attribute-name错误。

你代码里的这些写法都是不允许的：

• 第4行：{opportunityOptions.length === 0}
• 第7行：{opportunityOptions.length > 0}
• 第17行：disabled={numRecords <= 0}
• 第20行：{opportunityIds.length === numRecords}

解决方案 #

把所有需要比较的逻辑移到组件的JS文件中，通过getter方法返回计算后的布尔结果，然后在HTML模板里直接引用这些属性名。

步骤1：修改JS文件

在你的LWC组件JS文件中添加以下getter方法（替换你的组件类名，保留原有业务方法）：

import { LightningElement, track } from 'lwc';

export default class MassCreateOpportunity extends LightningElement {
    @track opportunityOptions = [];
    @track numRecords = 0;
    @track opportunityIds = [];

    // 判断是否无可用机会
    get noOpportunities() {
        return this.opportunityOptions.length === 0;
    }

    // 判断是否有可用机会
    get hasOpportunities() {
        return this.opportunityOptions.length > 0;
    }

    // 判断是否禁用"Next"按钮
    get isNextButtonDisabled() {
        return this.numRecords <= 0;
    }

    // 判断已选机会数量是否等于设定值
    get hasSelectedEnoughOpportunities() {
        return this.opportunityIds.length === this.numRecords;
    }

    // 保留你原有的业务方法：handleChange、handleNext等
    // ...
}

步骤2：修改HTML模板

把原来带有比较表达式的部分替换为JS中定义的getter属性：

<template>
    <lightning-card title="Mass Create Opportunity Sample" icon-name="standard:opportunity">
        <div class="slds-m-around_medium">
            <template if:true={noOpportunities}>
                <p>No recent opportunities found.</p>
            </template>
            <template if:true={hasOpportunities}>
                <template if:true={numRecords}>
                    <lightning-input
                        type="number"
                        label="Number of Records"
                        value={numRecords}
                        onchange={handleChange}
                    ></lightning-input>
                    <div class="slds-m-top_medium">
                        <lightning-button
                            label="Next"
                            variant="brand"
                            onclick={handleNext}
                            disabled={isNextButtonDisabled}
                        ></lightning-button>
                    </div>
                </template>
                <template if:true={hasSelectedEnoughOpportunities}>
                    <template for:each={opportunityIds} for:item="opportunityId" for:index="index">
                        <div key={index} class="slds-m-bottom_medium">
                            <lightning-combobox
                                label={`Opportunity ${index + 1}`}
                                value={opportunityId}
                                options={opportunityOptions}
                                onchange={handleOpportunityChange}
                                data-key={index}
                                placeholder="-- Select Opportunity --"
                            ></lightning-combobox>
                        </div>
                    </template>
                    <div class="slds-m-top_medium">
                        <lightning-button
                            label="Create Records"
                            variant="brand"
                            onclick={handleCreateRecords}
                            disabled={hasEmptyOpportunity()}
                        ></lightning-button>
                    </div>
                </template>
            </template>
        </div>
    </lightning-card>
</template>

核心逻辑说明 #

LWC模板严格遵循标准HTML语法，只能直接绑定简单属性或返回值明确的方法，所有复杂的条件判断、数值计算都应该放到JS层处理——这样既符合语法规范，也能让代码逻辑更清晰、更易于维护。

内容的提问来源于stack exchange，提问作者Malo Lesegretain