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

Question

Я пытаюсь скрыть и показать на основе значения <td> в строке в моем угловом приложении 7. В приведенном ниже примере есть три строки со следующими заголовками.

Компонент

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

Если вы заметили в коде, я пытаюсь скрыть строку на основе следующего условия. То, что я ищу, это то, что строка должна быть скрыта на основе значения в Последнем редактировании строки. Поэтому мне нужно показать ColumnNames [2], если значение равно true в Last Edited

<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

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

исходя из этого, вам просто нужно заменить эту строку

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

к этому:

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

здесь скрипка для проверки поведения

Answer 2

Ваш шаблон таблицы выглядит запутанным;).Стандарт 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>

Answer 3

Есть какая-то конкретная причина, почему у вас был горизонтальный стол? это просто сделало HTML немного странным. Однако следующее решение даст вам то, что вы хотели ... функция возвращает истину / ложь, которая переключает видимость через *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>

завершено здесь работает стек стека