Angular 6 for Enterprise:Ready Web Applications
上QQ阅读APP看书,第一时间看更新

Null guarding with *ngIf

The idea strategy will be to use *ngIf, which is a structural directive, meaning Angular will stop traversing DOM tree elements beyond a falsy statement.

In the CurrentWeather component, we can easily check to see whether the current variable is null or undefined before attempting to render the template:

  1. Update the topmost p element with *ngIf to check whether current is an object, as shown:
src/app/current-weather/current-weather.component.html
<p *ngIf="current">
...
</p>

Now observe the console log and that no errors are being reported. You always ensure that your Angular application reports zero console errors. If you're still seeing errors in the console log, ensure that you have correctly reverted the OpenWeather URL to its correct state or kill and restart your npm start process. I highly recommend that you resolve any console errors before moving on. Once you've fixed all errors, ensure that you commit your code again.

  1. Commit your code.