Angular：显示根据前一行中的值隐藏一行答案

【问题标题】：Angular: Show hide a row based on a value in the previous rowAngular：显示根据前一行中的值隐藏一行
【发布时间】：2019-10-28 12:00:39
【问题描述】：

我正在尝试根据我的 Angular 7 应用程序中的行中的 <td> 值隐藏和显示。在下面的示例中，三行具有以下标题。

组件

public ColumnNames: string[] = ['Legal Class Name', 'Last Edited' , 'Legal Class ID'];

如果您在代码中注意到，我试图根据以下条件隐藏一行。我正在寻找的是应该根据上次编辑行中的值隐藏该行。因此，如果 Last Edited 中的值为 true，我需要显示 ColumnNames[2]

<ng-container *ngIf="c != ColumnNames[2]">

HTML

<table class="fundClassesTable table-striped" border="1">
  <tr *ngFor="let c of ColumnNames">
    <ng-container *ngIf="c != ColumnNames[2]">
      <th class="tableItem bold">{{ c }}</th>
      <ng-container *ngFor="let f of data">

        <ng-container>        
          <td class="tableItem" *ngIf="c == ColumnNames[0]">{{f.Description}}</td>
          <td class="tableItem" *ngIf="c == ColumnNames[1]">{{f.AuditSummary}}</td>
          <td class="tableItem" *ngIf="c == ColumnNames[2]">{{f.Id}}</td>
        </ng-container>

      </ng-container>
    </ng-container>
  </tr>
</table>

更新截图

【问题讨论】：

HTML：在*ngIf 中调用一个函数，将行的索引传递给它... TS：检查上一个索引以了解您的情况并通过真/假；
我不太清楚你的意思。我创建了一个 jsfiddle jsfiddle.net/nc8kjofr/1。你能告诉我吗
理想的结果应该是？
不要在这里说模棱两可的行/列造成混淆，如果Last Edited 即AuditSummary 为真，您是否要隐藏Class X？ Like this?
@Tom 如果最后编辑的任何一个为真，您想隐藏整行的合法类 ID

标签： html angular typescript html-table angular-ng-if

【解决方案1】：

你有一个水平表的任何特殊原因？它只是让 HTML 有点奇怪。但是，以下解决方案将为您提供您想要的...一个函数返回 true/false，它通过 *ngIf 切换可见性。

相关HTML：

<h3>
    Vertical Table
</h3>

<table class="fundClassesTable table-striped" border="1">
    <thead>
        <th class="tableItem bold">{{ColumnNames[0]}}</th>
        <th class="tableItem bold">{{ColumnNames[1]}}</th>
        <th class="tableItem bold" *ngIf='checkVisibility()'>{{ColumnNames[2]}}</th>
    </thead>
    <tbody>
        <tr *ngFor="let f of data">

            <td class="tableItem">{{f.className}}</td>
            <td class="tableItem">{{f.edited}}</td>
            <td class="tableItem" *ngIf='checkVisibility()'>{{f.id}}</td>
        </tr>
    </tbody>
</table>

<hr/>

    <h3>
        Horizontal Table
    </h3>
    <table class="fundClassesTable table-striped" border="1">
        <tbody>
            <tr>
                <th class="tableItem bold">{{ColumnNames[0]}}</th>
                <ng-container *ngFor="let f2 of data">
                    <td class="tableItem bold">{{f2.className}}</td>
                </ng-container>
            </tr>
            <tr>
                <th class="tableItem bold">{{ColumnNames[1]}}</th>
                <ng-container *ngFor="let f3 of data">
                    <td class="tableItem bold">{{f3.edited}}</td>
                </ng-container>
            </tr>
            <tr *ngIf='checkVisibility()'>
                <th class="tableItem bold">{{ColumnNames[2]}}</th>
                <ng-container *ngFor="let f4 of data">
                    <td class="tableItem bold">{{f4.id}}</td>
                </ng-container>
            </tr>
        </tbody>
    </table>

完成working stackblitz here

【讨论】：

【解决方案2】：

如果我是正确的，如果最后编辑中的任何一个为 true，您希望隐藏整个法律类 ID 行。

考虑到这一点，你只需要替换这一行

<td class="tableItem" *ngIf="c == ColumnNames[2]">{{f.Id}}</td>

到这里：

<td class="tableItem" *ngIf="c == ColumnNames[2] && f.AuditSummary =='false' ">{{f.Id}}</td>

这里是fiddle 来检查行为

【讨论】：

【解决方案3】：

您的表格模板看起来有点混乱 ;)。 HTML 标准不期望水平方向的table，所以要做到这一点，需要以任何方式完成一些技巧。

这是我对您的任务的解决方案（我省略了一些常见的代码行）：

代码有点多，但这是为了提高可读性和可维护性（在我看来）。
与其他一些解决方案相比，它对性能的要求也较低，因为数据只迭代一次。
大部分逻辑是在代码隐藏中完成的，而不是在模板中。

Live example on StackBlitz

app.component.ts：

import { MyType } from './my-table/my-table.component';

// @Component ...
export class AppComponent  {
  myData: MyType[] = [
    { legalClassName: 'Class A', lastEdited: false, legalClassID: '11167' },
    { legalClassName: 'Class B', lastEdited: false, legalClassID: '13717' }
  ];
}

app.component.html

<my-table [data]="myData"></my-table>

my-table.component.ts

import { Component, OnInit, Input, OnChanges } from '@angular/core';

export class MyType {
  legalClassName: string;
  lastEdited: boolean;
  legalClassID: string;
}

class HorizontalTableColumn {
  header: string;
  visible: boolean;
  items: any[];
}

// @Component ...
export class MyTableComponent implements OnInit, OnChanges {
  @Input()
  data: MyType[];

  columnsThatAreActuallyRows: HorizontalTableColumn[] = [
    { header: 'Legal Class Name', visible: true, items: [] },
    { header: 'Last Edited',      visible: true, items: [] },
    { header: 'Legal Class ID',   visible: true, items: [] }
  ];

  constructor() { }

  ngOnInit() {
    this.processData();
  }

  ngOnChanges() {
    this.processData();
  }

  private processData() {
    this.columnsThatAreActuallyRows[0].items = [];
    this.columnsThatAreActuallyRows[1].items = [];
    this.columnsThatAreActuallyRows[2].items = [];

    let newVal = this.data;
    if (newVal != undefined && newVal != null && newVal.length > 0) {
      for (let i = 0; i < newVal.length; i++) {
        let item = newVal[i] as MyType;

        this.columnsThatAreActuallyRows[0].items.push(item.legalClassName);
        this.columnsThatAreActuallyRows[1].items.push(item.lastEdited);
        this.columnsThatAreActuallyRows[2].items.push(item.legalClassID);

        if (item.LastEdited) {
          this.columnsThatAreActuallyRows[2].visible = false;
        }
      }
    }
  }

}

my-table.component.html

<table>
  <ng-container *ngFor="let fakeCol of columnsThatAreActuallyRows"> 
    <tr *ngIf="fakeCol.visible">
      <th>{{fakeCol.header}}</th>
      <td *ngFor="let item of fakeCol.items">{{item}}</td>
    </tr>
  </ng-container>
</table>

【讨论】：