Display output and also showing type error in angular?

Question

Actually it is printing the correct output in the UI. But in the console it is displaying a type error?... How can I resolve this?

<tr>
 <th scope="row">IP addrress</th>
  <td>{{deviceinfo['ip-address']}}</td>
</tr>

ERROR TypeError: Cannot read property 'ip-address' of undefined

Answer 1

this may happen in case deviceinfo was not assign yet as example you get the value by http request

you can use ngIf to display the deviceinfo information when it has a value or truthy

<ng-container *ngIf="deviceinfo">
   <td>{{deviceinfo['ip-address']}}</td>
<ng-container>

another option is to set deviceinfo property to empty object

component

 public deviceinfo:any = {};

Answer 2

Or you could do:

<tr>
<th scope="row">IP addrress</th>
<td>{{deviceinfo?.ip-address}}</td>
</tr>

for the short form