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

Daming 2018-10-28
0条评论 681 次浏览
Daming 2018-10-280条评论 681 次浏览

今天在使用 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 值。

1+

发表评论

电子邮件地址不会被公开。