Angular：从包含 null 的异步数据打印 Null

如何解决Angular：从包含 null 的异步数据打印 Null

我正在从包含一些空值的后端（Node.js/Express.js + Oracledb）获取数据。我想在 HTML 表格中打印 Null，其中数据包含 null。有没有办法做到这一点？

我的代码：

.component.html

<div class="table-responsive">
  <table style = "text-align: center; margin: auto;">
    <thead>
      <th>
        Company Code
      </th>
      <th>
        Company Name
      </th>
      <th>
        Company Sub Mode
      </th>
      <th>
        Short Details
      </th>
    </thead>
    <tbody *ngFor = "let compData of companyData">
      <tr>
        <td>{{compData[0][0]}}</td>
        <td>{{compData[0][1]}}</td> //here I want to print Null if the value from the backend contains null
        <td>{{compData[0][2]}}</td>
        <td>{{compData[0][3]}}</td>
      </tr>
    </tbody>
  </table>
</div>

.component.ts

processListByNum()
{
  
  const params = new HttpParams().set('id',test)

  this.http.get<{[key: string] : Corporate}> 
  ('http://localhost:3000/api/searchCompany',{params})
  .pipe(map(responseData => {
      const postsArray : Corporate [] = [];

      for(const key in responseData)
      {
        if(responseData.hasOwnProperty(key))
        {
          postsArray.push({...responseData[key],idkey: key});
        }
      }
      return postsArray;
  }))
  .subscribe(posts => {

    this.companyData = posts;
    console.log(this.companyData);
  },error => {
  console.log("Error occurred while searching the company " + error.message);

})
}

}

解决方法

如果你从 compData[0][1] 得到 null

那你可以试试

{{compData && compData[0] && compData[0][1] ? compData[0][1] : 'Null'}}

,

如果 compData 也是数组，你可以使用这样的东西

<tbody>
      <tr>
              // Since you are already running in a loop,one td element is enough.
              <td  *ngFor = "let compData of companyData[0]">
                       {{ compData ? compData : 'Null' }}
              </td>
      </tr>
</tbody>