使用ngFor和ngIf隐藏元素
使用ngFor和ngIf隐藏元素
提问于 2019-05-14 06:16:48
在单击其中一个列表后，我希望隐藏li元素中的其他3个元素(单击的列表仍未隐藏)，因为我尝试将所有的li元素隐藏起来。
payment.component.ts
paymentLists = [
{
name: 'IpayEasy',
},
{
name: 'Credit Card',
},
{
name: 'Internet Banking',
},
{
name: '7-Eleven',
},
];
selectedIndex: number;
select(index:number) {
this.selectedIndex = index;
}payment.component.html
<ul *ngIf="selectedIndex == paymentList">
<li (click)="select(paymentList)"
*ngFor="let paymentList of paymentLists; let i=index">
<span>{{paymentList.name}}</span>
</li>
</ul>我试过什么，演示
在此之前：
- IpayEasy
- 信用卡
- 网上银行
- 7-11(点击li) 之后：
- 7-11 (li元素未隐藏)
回答 4
Stack Overflow用户
回答已采纳
发布于 2019-05-14 06:25:56
您需要按以下方式更新模板
- 将ngFor移动到ng容器元素。
- 只有在没有选定索引或匹配的选定索引时，才更新ngIf条件为真
select函数的Pass指标
更新后的html如下
<ul>
<ng-container *ngFor="let paymentList of paymentLists; let i=index" >
<li (click)="select(i)" *ngIf="selectedIndex === undefined || selectedIndex == i" [ngClass]="{'tab__list--selected--mobile': selectedIndex == paymentList}">
<span>{{paymentList.name}}</span>
</li>
</ng-container>
</ul>供参考，以下是工作版本
Stack Overflow用户
发布于 2019-05-14 06:26:25
试一试
<ul *ngIf="selectedIndex == paymentList">
<ng-container *ngFor="let paymentList of paymentLists; let i=index">
<li (click)="select(paymentList)" *ngIf="!selectedIndex || selectedIndex=i">
<span>{{paymentList.name}}</span>
</li>
</ng-container>
</ul>Stack Overflow用户
发布于 2019-05-14 06:32:36
您可以使用此代码而不是您的代码：
你的ts：
select(index) {
this.paymentLists = [index];
}您的HTML：
<ul *ngIf="selectedIndex == paymentList">
<li (click)="select(paymentList)"
*ngFor="let paymentList of paymentLists; let i=index">
<span>{{paymentList.name}}</span>
</li>
</ul>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56124085
复制相关文章
相似问题
腾讯云开发者
