Угловой: Показать скрыть строку на основе значения в предыдущей строке

Какая-то конкретная причина, по которой у вас был горизонтальный стол? это просто сделало HTML немного странным. Однако следующее решение даст вам то, что вы хотели ... функция возвращает true / false, которая переключает видимость через *ngIf.

релевантный TS:

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';
  public ColumnNames: string[] = ['Legal Class Name', 'Last Edited', 'Legal Class ID'];
  data: any[] = [
    { className: 'class A', edited: 'true', id: '11101' }, { className: 'class B', edited: 'false', id: '11101' },
    { className: 'class C', edited: 'true', id: '11101' }, { className: 'class C', edited: 'true', id: '11101' },
    { className: 'class E', edited: 'true', id: '11101' }, { className: 'class D', edited: 'true', id: '11101' },
    { className: 'class G', edited: 'true', id: '11101' }, { className: 'class E', edited: 'true', id: '11101' },
    { className: 'class I', edited: 'true', id: '11101' }, { className: 'class F', edited: 'true', id: '11101' },
    { className: 'class K', edited: 'true', id: '11101' }, { className: 'class G', edited: 'true', id: '11101' },
  ]
  constructor() { }

  checkVisibility() {
    let columnCheck: boolean = true;
    for (var i = 0; i < this.data.length; i++) {
      if (this.data[i].edited == 'false') {
        return false;
      }
    }
    return columnCheck;
  }
}

соответствующий 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>

полный рабочий stackblitz здесь

если я прав, вы хотите, чтобы все последние изменения были верны, чтобы скрыть всю строку идентификатора юридического класса.

по этому соображению вам просто нужно заменить эту строку

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

к этому:

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

вот скрипка, чтобы проверить поведение

Ваш шаблон таблицы выглядит немного запутанным;). Стандарт HTML не предполагает table в горизонтальной ориентации, поэтому для этого нужно каким-либо образом проделать некоторые уловки.

Вот мое решение вашей задачи (я пропустил некоторые общие строки кода):

• Это немного больше кода, но это для большей читабельности и удобства обслуживания (на мой взгляд).
• Это также менее требовательно к производительности, чем некоторые другие решения, поскольку данные повторяются только один раз.
• Большая часть логики выполняется в коде программной части, а не в шаблоне.

Живой пример на 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>