Javascript 角度-如果符合条件，则在ngFor中隐藏表格行

我有一个angular应用程序，它正在呈现员工详细信息表。有一个名为

Optional

的数据点，用于确定默认情况下是否应显示该数据点

我的目标是在默认情况下隐藏这些行，然后单击按钮即可打开/关闭这些行

例如：

<table class="table table-condensed table-striped" *ngIf="s.fields">
   <tbody>
      <tr *ngFor="let f of s.fields.field" [class.hidden]="f.Optional == 1">
        <td>{{ f.FieldTitle }}</td>
        <td>{{ f.Value }}</td>
      </tr>
    </tbody>
</table>

{{f.FieldTitle}}
{{f.值}}

到目前为止，我已经通过向行中添加类来正确隐藏可选行

我最终需要能够单击一个按钮来显示/隐藏这些隐藏的行，但我不确定如何使用这种方法

---

我是使用CSS还是以某种方式为其创建双向绑定或模型？

我假设您的数据如下所示：

  s = {
    fields: {
      field: [
        {
          FieldTitle: 'field 1',
          Value: ' value 1',
          Optional: '1'
        },
        {
          FieldTitle: 'field 2',
          Value: ' value 2',
          Optional: '0'
        },
        {
          FieldTitle: 'field 3',
          Value: ' value 3',
          Optional: '1'
        },
        {
          FieldTitle: 'field 4',
          Value: ' value 4',
          Optional: '0'
        },
                {
          FieldTitle: 'field 5',
          Value: ' value 5',
          Optional: '0'
        }
      ]
    }
  }

这可以通过对表数据的简单条件和简单的

单击
侦听器来实现：

<table class="table table-condensed table-striped" *ngIf="!isToggled && s.fields">
   <tbody>
      <tr *ngFor="let f of s.fields.field">
        <td *ngIf="f.Optional == 1">{{ f.FieldTitle }}</td>
        <td *ngIf="f.Optional == 1">{{ f.Value }}</td>
      </tr>
    </tbody>
</table>
<br>
<button (click)="onToggle()">toggle</button>


{{f.FieldTitle}}
{{f.值}}


切换

确保组件.ts上的
isToggled
布尔值设置为
false
和
onToggle
函数

示例：
这是我为您提供的解决方案，使用ng容器和函数根据可选和切换状态确定状态

TS

state: boolean = false;

isAllowed = (optional) => {
  return optional === 0 ? true : this.state;
}

changeState = () => {
  this.state = !this.state;
}

HTML

<table class="table table-condensed table-striped" *ngIf="s.fields">
   <tbody>
      <tr *ngFor="let f of s.fields.field">
        <ng-container *ngIf="isAllowed(f.Optional)">
          <td>{{ f.FieldTitle }}</td>
          <td>{{ f.Value }}</td>
        </ng-container>
      </tr>
    </tbody>
</table>
<br>
<button (click)="changeState()">Show/Hide</button>


{{f.FieldTitle}}
{{f.值}}


显示/隐藏
这非常接近。关于我的数据结构，您也是正确的。此处的最终目标是始终显示
optional=0
，当其
optional=1
时，它将隐藏，直到单击按钮为止。在您的示例中，默认情况下应显示2、4、5，切换应显示/隐藏1、3。这非常有效！我不知道
ng容器
。HTML表非常严格，所以我不能像在
div
中包装
tr
那样使用逻辑，但这本质上允许我需要的父级。