使用 ngFor 和 ngIf 隐藏元素答案

【问题标题】：Hide element using ngFor and ngIf使用 ngFor 和 ngIf 隐藏元素
【发布时间】：2019-10-01 02:34:01
【问题描述】：

我想在单击列表之一后隐藏 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

之前：

易支付

信用卡

网上银行

7-11（点击 li）

之后：

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

【问题讨论】：

如果 index（和 selectedIndex）是一个数字，而 paymentList 是一个数组，那么 selectedIndex 怎么可能等于一个数组？
检查这个：stackblitz.com/edit/angular-display-list-pysyaj
您可以通过单击左侧的灰色大复选按钮来接受一个答案（如果对您有帮助）。如果您希望可以通过单击上方灰色三角形为任何好的答案的任何作者添加 +10 分

标签： html angular typescript

【解决方案1】：

您需要按以下方式更新您的模板

将 ngFor 移至 ng-container 元素
仅当没有选定索引或匹配的选定索引时才将 ngIf 条件更新为 true
在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

【讨论】：

【解决方案2】：

试试

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

仅作记录，因为我之前的答案不是很清楚。这里对上述问题的解决方案进行了详尽的解释。

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>

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

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

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

我猜这个答案有资格不被删除！！！！！

【讨论】：