如果 angular 中的任何单元格值为空，如何隐藏整行

Question

我想隐藏相应行的付款到期日期单元格为空的行。虽然付款到期日的任何值为 null 或为空，但我想分别隐藏整行。

user.service.ts

import { Injectable } from '@angular/core';
import { HttpClient} from '@angular/common/http'

@Injectable({
  providedIn: 'root'
})
export class UsersService {

  constructor( private http:HttpClient) { }

  getData(){
    let url="https://Test.azurewebsites.net/api/accounts/getall";
    return this.http.get(url);

  } 
}

app.component.ts

import { analyzeAndValidateNgModules } from '@angular/compiler';
import { Component } from '@angular/core';
import { UsersService} from './users.service'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'coding-test';
  data : any
  constructor( private user:UsersService){
    this.user.getData().subscribe(data=>{
      console.warn(data)
      this.data = data
    })
  }
}

app.component.html

<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-6">Display Sorted Account Info</h1>
    <table class="table table-striped" >
      <thead>
          <tr>
              <th>Name</th>
              <th>Email</th>
              <th>Phone</th>
              <th >Amount Due</th>
              <th>Payment Due Date</th>
          </tr>
      </thead>
      <tbody>
          <tr *ngFor="let item of data"  >
              <td>{{item.LastName}},{{item.FirstName}}</td>
              <td>{{item.Email}}</td>
              <td>{{item.PhoneNumber | phone}}</td>
              <td>{{item.AmountDue | currency}}</td>
              <td>{{item.PaymentDueDate | date}}</td>
          </tr>
      </tbody>
  </table>
  </div>
</div>

Answer 1

尝试根据你的ts中的条件过滤掉对象file.This将解决你的问题。

Answer 2

在 app.component.ts 上，您可以通过更改 ((this.data = data )) 添加 filter 到 :

this.data = data.filter(x=>x.PaymentDueDate !== null );

如果 angular 中的任何单元格值为空，如何隐藏整行

How to hide the full row if any cell value is null in angular

html

css

pipe

httpclient

angular