Angular中Bootstrap 5.2.2标签页仅首个显示内容问题求助

核心问题定位 #

你代码中International Transfer和Intrabank Transfer标签按钮的data-bs-target属性缺失了ID选择器前缀#，Bootstrap的tab切换逻辑依赖该属性通过ID匹配对应的面板，缺少#会导致无法定位到目标面板，最终显示空白。

修正后的代码片段 #

重点修改两个按钮的data-bs-target属性：

<div class="card border-0">
    <div class="card-header white-background d-flex justify-content-around">
        <ul class="nav nav-underline card-header-tabs pt-3" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="domestic-tab" data-bs-toggle="tab"
                    data-bs-target="#domestic-tab-pane" type="button" role="tab"
                    aria-controls="domestic-tab-pane" aria-selected="true">Domestic Transfer</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="international-tab" data-bs-toggle="tab"
                    data-bs-target="#international-tab-pane" type="button" role="tab"
                    aria-controls="international-tab-pane" aria-selected="false">International
                    Transfer</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="intrabank-tab" data-bs-toggle="tab"
                    data-bs-target="#intrabank-tab-pane" type="button" role="tab"
                    aria-controls="intrabank-tab-pane" aria-selected="false">Intrabank Transfer</button>
            </li>
        </ul>
    </div>
    <div class="card-body ">
        <div class="tab-content">
            <div class="tab-pane show fade active" id="domestic-tab-pane" role="tabpanel"
                aria-labelledby="domestic-tab" tabindex="0">
                <div class="row pb-4 pt-3">
                    <div class="col">
                        <label for="domestic-accountInput" class="form-label">Recipient Account Number</label>
                        <input type="text" class="form-control form-control-lg border border-dark" id="domestic-accountInput" aria-label="Account number">
                    </div>
                    <div class="col">
                        <label for="domestic-bankInput" class="form-label">Recipient Bank</label>
                        <input type="text" class="form-control form-control-lg border border-dark" id="domestic-bankInput" aria-label="Bank">
                    </div>
                </div>
                <div class="row pb-4">
                    <div class="col">
                        <label for="domestic-amountInput" class="form-label">Amount</label>
                        <input type="text" class="form-control form-control-lg border border-dark" id="domestic-amountInput" aria-label="Amount">
                    </div>
                    <div class="col">
                        <label for="domestic-pinInput" class="form-label">Pin</label>
                        <input type="text" class="form-control form-control-lg border border-dark" id="domestic-pinInput" aria-label="Pin">
                    </div>
                </div>
                <div class="form-check">
                    <input class="form-check-input border border-dark border-2 py-2 px-2 me-2 " type="checkbox" value="" id="domestic-addBeneficiary">
                    <label class="form-check-label my-1" for="domestic-addBeneficiary">
                        Add to Beneficiary
                    </label>
                </div>
                <div class="row py-4">
                    <div class="col text-center">
                        <button type="button" class="btn btn-light primary-bg btn-lg w-50"><span class="grey-light">Submit</span></button>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="international-tab-pane" role="tabpanel"
                aria-labelledby="international-tab" tabindex="1">
                <div class="row pb-4 pt-3">
                    <div class="col">
                        <label for="international-accountInput" class="form-label">Recipient Account Number</label>
                        <input type="text" class="form-control form-control-lg border border-dark" id="international-accountInput" aria-label="Account number">
                    </div>
                    <div class="col">
                        <label for="international-bankInput" class="form-label">Recipient Bank</label>
                        <input type="text" class="form-control form-control-lg border border-dark" id="international-bankInput" aria-label="Bank">
                    </div>
                </div>
                <div class="row pb-4">
                    <div class="col">
                        <label for="international-amountInput" class="form-label">Amount</label>
                        <input type="text" class="form-control form-control-lg border border-dark" id="international-amountInput" aria-label="Amount">
                    </div>
                    <div class="col">
                        <label for="international-pinInput" class="form-label">Pin</label>
                        <input type="text" class="form-control form-control-lg border border-dark" id="international-pinInput" aria-label="Pin">
                    </div>
                </div>
                <div class="form-check">
                    <input class="form-check-input border border-dark border-2 py-2 px-2 me-2 " type="checkbox" value="" id="international-addBeneficiary">
                    <label class="form-check-label my-1" for="international-addBeneficiary">
                        Add to Beneficiary
                    </label>
                </div>
                <div class="row py-4">
                    <div class="col text-center">
                        <button type="button" class="btn btn-light primary-bg btn-lg w-50"><span class="grey-light">Submit</span></button>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="intrabank-tab-pane" role="tabpanel"
                aria-labelledby="intrabank-tab" tabindex="0">
            </div>
        </div>
    </div>
</div>

额外检查项 #

1. 确保Bootstrap JavaScript已正确集成到Angular项目中（tab切换依赖Bootstrap的tabs插件）
2. 验证所有tab面板的ID与按钮data-bs-target值完全匹配（注意大小写敏感）
3. 修正代码中重复的元素ID（已在上述代码中修改，如将accountInput改为domestic-accountInput等），重复ID会导致表单标签关联失效，虽不影响tab切换，但属于前端规范问题

内容的提问来源于stack exchange，提问作者Adedeji Onigbinde