Question

如何根据选择的单选按钮显示/隐藏列表项的div？如果我选择第一个单选按钮，则应显示项目[0]。如果我选择第二个单选按钮，则现在隐藏项目[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>

在* ngFor中显示/隐藏列表中的项目

2 个答案: