html - Angular: แสดงหรือซ่อนแถวตามค่าของแถวก่อนหน้า

ฉันกำลังพยายามซ่อนและแสดงตามค่าของ <td> ในแถวในแอปพลิเคชัน Angular 7 ของฉัน ในตัวอย่างด้านล่าง มีสามแถวที่มีหัวข้อดังต่อไปนี้

ส่วนประกอบ

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

ถ้าคุณสังเกตในโค้ด ผมกำลังพยายามซ่อนแถวตามเงื่อนไขดังต่อไปนี้ สิ่งที่ผมต้องการคือให้แถวถูกซ่อนตามค่าที่อยู่ในแถว Last Edited ดังนั้นผมจำเป็นต้องแสดง ColumnNames[2] ถ้าค่าของ Last Edited เป็นจริง

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

เอชทีเอ็มแอล

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

สกรีนช็อตที่อัปเดต

คำตอบ #1

มีเหตุผลเฉพาะไหมว่าทำไมคุณถึงมีตารางแนวนอน? มันทำให้ 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>

สแต็กบลิทซ์ที่ทำงานสมบูรณ์อยู่ที่นี่

คำตอบ #2

ถ้าฉันถูก คุณต้องการว่าถ้าเงื่อนไขใด ๆ ของการแก้ไขล่าสุดเป็นจริง ให้ซ่อนแถว ID ประเภททางกฎหมายทั้งหมด

โดยการพิจารณานี้ คุณเพียงแค่ต้องแทนที่แถวนี้

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

ไปยังนี้:

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

นี่คือตัวอย่างเพื่อทดสอบพฤติกรรม