Angular：从包含空值的异步数据打印空值

Question

我正在从后端 (Node.js/Express.js + Oracledb) 获取数据，其中包含一些空值。我想在数据包含 null 的 HTML 中的 table 中打印 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);

})
}

}

Answer 1

如果你从 compData[0][1]

得到 null

那你可以试试

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

Answer 2

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

Angular：从包含空值的异步数据打印空值

Angular: Print Null from an asynchronous data that contains null

angular

angular-fullstack