Angular 2中动态控制Tooltip显隐，解决ngFor循环内undefined问题

这个问题我之前也碰到过，Angular里直接绑定item.title的话，当值为undefined时浏览器确实会把它当成字符串显示出来。给你几个简单实用的解决办法：

• 使用空值合并操作符（推荐）
  用??操作符是最严谨的方式，它只会在左侧值为null或undefined时返回右侧内容，完全不会影响合法的空字符串或0这类有效值：

  <div *ngFor="let item of items">
    <div [title]="item.title ?? ''">
      <!-- 你的元素内容 -->
    </div>
  </div>
  

  这样当item.title不存在时，title属性会被设为空字符串，浏览器就不会显示任何tooltip了。

• 条件绑定移除title属性
  如果你希望没有tooltip的元素上完全不出现title属性（而不是设为空），可以用[attr.title]结合三元表达式，当值不存在时设为null：

  <div *ngFor="let item of items">
    <div [attr.title]="item.title ? item.title : null">
      <!-- 你的元素内容 -->
    </div>
  </div>
  

  Angular会自动忽略值为null的属性绑定，这样元素上就不会有title属性，彻底避免意外的tooltip提示。

• 逻辑或操作符（兼容旧环境）
  如果你还在使用不支持空值合并的旧版TypeScript/JavaScript，可以用||操作符，不过要注意：如果item.title本身是合法的假值（比如空字符串''、数字0），也会被替换成空字符串，根据你的实际数据情况选择：

  <div *ngFor="let item of items">
    <div [title]="item.title || ''">
      <!-- 你的元素内容 -->
    </div>
  </div>
  

内容的提问来源于stack exchange，提问作者Viv