Show/Hide *ngFor 列表中的项目

Question

我如何 show/hide 列表项的 div 取决于 select 编辑了哪个单选按钮？如果我 select 第一个单选按钮，项目 [0] 应该显示。如果我 select 第二个单选按钮，项目 [0] 现在隐藏，项目 [1] 显示。我不确定使这项工作起作用的最佳做法是什么，因为我已经有了 *ngFor，并且您不能将其与 *ngIf 结合使用。 :( 在组件内设置布尔变量似乎只是切换整个部分，这不是我想要的。

HTML

<section>
    <ul>
        <li>
            <input [(ngModel)]="regionSelected" type="radio" id="radio">
            <label>Europe</label>
        </li>
        <li>
            <input [(ngModel)]="regionSelected" type="radio" id="radio">
            <label>USA</label>
        </li>
    </ul>
</section>

<section *ngIf="regionSelected">
    <div *ngFor="let item of result; let i=index" [ngClass]="{'europe': i === 0, 'usa': i === 1}">
        <h3>{{item.title}}</h3>
    </div>
</section>

有什么想法吗？

Answer 1

也许是这样的？

组件中的方法：

getRadioIndex(regionSelected: string){
    if(regionSelected === 'Europe'){
        return 0;
    }
    if(regionSelected === 'Europe'){
        return 1;
    }
}

模板：

<section *ngIf="regionSelected">
    <span *ngFor="let item of result; let i=index">
        <div *ngIf="i === getRadioIndex(regionSelected)" [ngClass]="{'europe': i === 0, 'usa': i === 1}">
            <h3>{{item.title}}</h3>
        </div>
    </span>
</section>

Answer 2

<div>    
    <section>
        <ul>
            <li>
                <input [(ngModel)]="regionSelected" type="radio" id="radio">
                <label>Europe</label>
            </li>
            <li>
                <input [(ngModel)]="regionSelected" type="radio" id="radio">
                <label>USA</label>
            </li>
        </ul>
    </section>

    <section *ngIf="regionSelected">
        <div *ngFor="let item of result; let i=index" 
             [ngClass]="{'europe': i === 0, 'usa': i === 1}" 
             *ngIf="i === regionSelected">
            <h3>{{item.title}}</h3>
        </div>
    </section>

</div>

Show/Hide *ngFor 列表中的项目

Show/Hide item from list in *ngFor

radio-button

ngfor

angular