angular使用安全导航符避免渲染报错

今天在使用 innerHtml 渲染html字符串时， 页面正常，发现控制台有报错：
Cannot read property 'contentHtml' of undefined

 <div class="row">
        <div class="col-12"><h2>{{news.title}}</h2></div>
        <div class=" col-12 info"><span>{{news.authorName}}</span><span>{{news.createTime | date : 'yyyy-MM-dd hh:mm '}}</span><span> <i class="fa fa-eye"></i>{{news?.viewCount}}</span></div>
        <div class="col-12"><p class="summary">{{news.digest}}</p></div>
      </div>
      <div class="row">
        <div class="col-12 content"  [innerHTML]="news.contentHtml"></div>
      </div>

咨询大佬后了解到 是因为angular在渲染模板的时候 news还没定义造成的，new 是异步从后台拿的数据，， 可以在这块代码加一个ngif 解决，但是这样不是最优方案 ，最优方案是用安全导航符?,像下面这样：

    <!--<div class="col-12 col-md-9">-->
    <div  class="col-12 col-md-12 newsWrapper">
      <div class="row">
        <div class="col-12"><h2>{{news?.title}}</h2></div>
        <div class=" col-12 info"><span>{{news?.authorName}}</span><span>{{news?.createTime | date : 'yyyy-MM-dd hh:mm '}}</span><span> <i class="fa fa-eye"></i>{{news?.viewCount}}</span></div>
        <div class="col-12"><p class="summary">{{news?.digest}}</p></div>
      </div>
      <div class="row">
        <div class="col-12 content"  [innerHTML]="news?.contentHtml"></div>
      </div>

    </div>

Angular 的安全导航操作符 (?.) 是一种流畅而便利的方式，用来保护出现在属性路径中 null 和 undefined 值。