代码之家 › 专栏 › 技术社区 › mk_99

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

ngfor radio-button angular

mk_99 · 技术社区 · 9 年前

如何根据选择的单选按钮显示/隐藏列表项的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>

有什么想法吗?

2 回复 | 直到 9 年前

Robin Dijkhof 9 年前

也许是这样?

组件中的方法:

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>

Yoav Schniederman 9 年前

<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>

推荐文章

lily · 淘汰-如何将动态填充的复选框转换为单选按钮(是/否)?

8 年前