Question

我有一个角度应用程序正在呈现员工详细信息表。有一个名为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>

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

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

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

Answer 1

这是我为您提供的解决方案，它使用ng-container和一个根据可选状态和切换状态确定状态的函数。

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>

Answer 2

我认为您的数据如下所示：

  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'
        }
      ]
    }
  }

这可以通过对表数据的简单条件和简单的click侦听器来实现：

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

确保在您的 component.ts 上将isToggled布尔值设置为false和一个onToggle函数。

示例：stackblitz.com

角度-如果满足条件则在ngFor中隐藏表格行

2 个答案: