Question

我试图基于我的angular 7应用程序中的行中的<td>值进行隐藏和显示。在下面的示例中，三行带有以下标题。

组件

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

如果您在代码中注意到，我将根据以下情况尝试隐藏一行。我正在寻找的是应基于“上次编辑的”行中的值隐藏该行。因此，如果上次编辑中的值为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>

更新的屏幕截图

Answer 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

Answer 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，用于检查行为

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

角度：根据上一行中的值显示隐藏行

3 个答案: