首页 文章

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

提问于
浏览 次
1

如何根据选择的单选按钮显示/隐藏列表项的div？如果我选择第一个单选按钮，则应显示项目[0] . 如果我选择第二个单选按钮，则现在隐藏项目[0]并显示项目[1] . 我不确定这项工作的最佳做法是什么，因为我已经有了* ngFor，你无法将它与* ngIf结合起来 . :(在组件中设置一个布尔var似乎只是切换整个部分，这不是我正在寻找的 .

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>

有任何想法吗？

angular radio-button ngfor

2 回答

  • 0

    这样的事可能吗？

    组件中的方法：

    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>
    回复于
  • 0
    <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>
    回复于

相关问题