Question

我想在单击列表中的一个（单击后的列表保持未隐藏）后隐藏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>

这是我尝试过的 demo

之前：

IpayEasy

信用卡

网上银行

7-11（点击了li）

之后：

7-11（li元素保持隐藏状态）

Answer 1

您需要按照以下说明更新模板

将ngFor移至ng-container元素
仅当没有选择的索引或没有匹配的选择的索引时才将ngIf条件更新为真
在select函数中通过索引

更新后的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>

作为参考，这里是working version

Answer 2

为此只需使用CSS。创建分类hide

.hide{
   display: none;
}

将此类应用于所有未选中的元素。另外，您正在为所选索引分配错误的值。而在您的html

 <ul>
    <li (click)="select(i)" 
      [ngClass]="{'tab__list--selected--mobile': selectedIndex == i,'hide': selectedIndex && i !== selectedIndex }"
      *ngFor="let paymentList of paymentLists; let i=index">
      <span>{{paymentList.name}}</span>
    </li>
  </ul>

您要选择的功能。您可以分别保存索引和付款类型。

  select(index:number) {
    this.selectedIndex = index;
    this.selectedPayment = this.paymentLists[index];
  }

也更新了Stackblitz Demo。

希望这会有所帮助：）

Answer 3

尝试

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

Answer 4

您可以使用以下代码代替您的代码：

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

Answer 5

仅作记录，因为我以前的回答不太清楚。这是对上述问题的解决方案的详尽解释。

paymentLists = [
    {
      name: 'IpayEasy',
    },
    {
      name: 'Credit Card',
    },
    {
      name: 'Internet Banking',
    },
    {
      name: '7-Eleven',
    },
  ];

  selectedIndex: number;

  select(index:number) {
    this.selectedIndex = this.paymentLists.findIndex(x => x.name==paymentListNameObject.name);
    this.paymentListSelected = true;
  }

在上述代码中，select函数接收一个对象而不是索引号。可以如上所述进行更正。我也添加了一个变量paymentListSelected。此变量跟踪是否已选择特定的付款方式。

在HTML中，您可以摆脱*ngIf="selectedIndex == paymentList"并使用以下命令：

    <ul>
        <li *ngFor="let paymentList of paymentLists; let i=index" (click)="select(paymentList)" 
          [ngClass]="{'tab__list--selected--mobile': ((i == selectedIndex)&&paymentListSelected),'hide-tab__list--unselected--mobile': paymentListSelected}">
          <span>{{paymentList.name}}</span>
        </li>
   </ul>

在这里，我添加了两个类别tab__list--selected--mobile，它们根据用户选择的索引号应用于所选的付款方式。为了隐藏其他选项，我在所有其他选项中添加了hide-tab__list--unselected--mobile。

最后，这是一个工作链接，以防万一解释不够清楚。

https://stackblitz.com/edit/angular-display-list-d19ffv

我猜这个答案符合不被删除的资格！！！！

使用ngFor和ngIf隐藏元素

5 个答案: