html - Angular: Menampilkan atau menyembunyikan baris berdasarkan nilai di baris sebelumnya

Saya mencoba untuk menyembunyikan dan menampilkan berdasarkan nilai <td> di baris dalam aplikasi Angular 7 saya. Dalam contoh di bawah, ada tiga baris dengan header berikut.

Komponen

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

Jika Anda memperhatikan di kode, saya mencoba menyembunyikan sebuah baris berdasarkan kondisi berikut. Yang saya cari adalah baris tersebut harus disembunyikan berdasarkan nilai di baris Last Edited. Jadi saya perlu menampilkan ColumnNames[2] jika nilainya benar di 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>

Tangkapan layar terbaru

Jawaban #1

Alasan khusus mengapa Anda menggunakan tabel horizontal? Itu hanya membuat HTML sedikit aneh. Namun, solusi berikut akan memberi Anda apa yang Anda inginkan... sebuah fungsi mengembalikan true/false yang mengatur visibilitas melalui *ngIf.

TS relevan:

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 yang relevan:

<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 yang berfungsi lengkap di sini

Jawaban #2

jika saya benar, Anda ingin jika salah satu dari edit terakhir benar, menyembunyikan seluruh baris ID kelas hukum.

dengan pertimbangan ini, Anda hanya perlu mengganti baris ini

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

kepada ini:

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

ini adalah fiddle untuk memeriksa perilaku