html - Angular: להציג או להסתיר שורה בהתאם לערך בשורה הקודמת

אני מנסה להסתיר ולהציג בהתבסס על הערך של <td> בשורה ביישום Angular 7 שלי. בדוגמה למטה, יש שלוש שורות עם הכותרות הבאות.

רכיב

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

אם שמים לב בקוד, אני מנסה להסתיר שורה על בסיס התנאי הבא. מה שאני מחפש הוא שהשורה תהיה מוסתרת על פי הערך בשורה האחרונה שנערכה. אז אני צריך להציג את ColumnNames[2] אם הערך הוא true בשורה האחרונה שנערכה

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

צילום מסך מעודכן

תשובה #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

אם אני צודק, אתה רוצה שאם אחד מהעריכות האחרונות הוא נכון, להסתיר את כל שורת מזהה הכיתה המשפטית.

בהתחשב בכך, אתה רק צריך להחליף את השורה הזו

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

אל זה:

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

הנה כלי לבדוק את ההתנהגות