Angular中ngFor内正确使用ngIf？选中银行详情无法显示问题

问题场景与现有代码 #

下拉选择框代码

<label for="bank_id">Bank</label>
<select class="browser-default custom-select custom-select-sx col-md-12 mb-auto" (change)="selectedBank($event)">
        <option selected>Select Bank</option>
        <option value="{{ bankData.id }}" *ngFor="let bankData of bankDetails; let i = index">
            {{ bankData.country_name}}
        </option>
</select>

获取选中银行ID的方法

selectedBank(event: any) {
    this.seletedbank = event.target.value;
}

尝试显示选中银行详情的代码

<div *ngFor = "let bankData of bankDetails">
    <div *ngif="bankData.id == seletedbank">
        <h6 class="text-center font-weight-bold">
            {{ bankData.country_name}} - Bank Details
        </h6>
    </div>
</div>

核心问题 #

上述代码中*ngif未生效，无法显示选中银行ID对应的详情数据。

解决方案 #

1. 修复指令拼写错误
   Angular的条件渲染指令是*ngIf（注意大写字母I），你当前写的*ngif是小写，这是指令不生效的直接原因，修正后模板代码如下：

<div *ngFor = "let bankData of bankDetails">
    <div *ngIf="bankData.id == seletedbank">
        <h6 class="text-center font-weight-bold">
            {{ bankData.country_name}} - Bank Details
        </h6>
    </div>
</div>

2. 解决类型匹配问题
   event.target.value返回的是字符串类型，若bankData.id是数字类型，直接用==会存在隐式转换风险，建议改为严格相等判断，同时将选中值转为数字类型：

selectedBank(event: any) {
    this.seletedbank = Number(event.target.value);
}

模板中对应修改判断逻辑：

<div *ngIf="bankData.id === seletedbank">

3. 优化渲染逻辑（可选）
   无需遍历所有银行数据再判断，直接通过ID匹配目标对象，性能更优：

• 组件内调整方法并新增变量：

selectedBankObj: any; // 建议根据实际数据结构定义具体类型

selectedBank(event: any) {
    const targetId = Number(event.target.value);
    this.selectedBankObj = this.bankDetails.find(bank => bank.id === targetId);
}

• 模板直接渲染选中对象：

<div *ngIf="selectedBankObj">
    <h6 class="text-center font-weight-bold">
        {{ selectedBankObj.country_name }} - Bank Details
    </h6>
    <!-- 可在此添加更多银行详情字段 -->
</div>

内容的提问来源于stack exchange，提问作者Onella Natalie