Angular: Print Null from an asynchronous data that contains null

Question

I am fetching the data from backend (Node.js/Express.js + Oracledb) which contains some null values. I want to print Null in the table in HTML where the data contains null. Is there a way that I can do that?

My code:

.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);

})
}

}

Answer 1

if you get null from compData[0][1]

then you can try

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