如果任何单元格值在角度中为空，如何隐藏整行答案

【问题标题】：How to hide the full row if any cell value is null in angular如果任何单元格值在角度中为空，如何隐藏整行
【发布时间】：2021-08-03 03:29:29
【问题描述】：

我想隐藏相应行的付款到期日单元格为空的行。虽然 Payment Due Date 的任何值为 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>

【问题讨论】：

标签： html css angular pipe httpclient

【解决方案1】：

在app.component.ts 上，您可以通过更改 ((this.data = data )) 将过滤器 添加到：

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

【讨论】：

收到此错误。知道如何解决此错误：src/app/app.component.ts:22:24 - 错误 TS2339：“对象”类型上不存在属性“过滤器”。 22 this.data = data.filter((x: { PaymentDueDate: null; })=>x.PaymentDueDate !== null );
刚刚修复它。谢谢。使用这行代码 if(Array.isArray(data)){ this.data = data.filter( res => res.PaymentDueDate !== null); }

【解决方案2】：

尝试根据您的ts文件中的条件过滤掉对象。这将解决您的问题。

【讨论】：

我需要在 user.service.ts 或 app.component.ts 上做吗？
这是你的愿望，虽然在服务层会更好。