Angular5中*dropdownMenu与*ngFor同元素报错的解决方法

嘿，这个问题我之前也碰到过！Angular的规则很明确：同一个DOM元素上不能同时使用多个带*的模板绑定指令。*dropdownMenu和*ngFor其实都是Angular的语法糖，最终都会被转换成<template>标签，堆在同一个元素上自然就报错了。

最简单的解决办法就是把循环逻辑移到下拉菜单的子元素上——毕竟你要循环的是菜单项，不是整个菜单容器对吧？修改后的代码应该是这样：

<div class="btn-group" dropdown>
  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle" (click)="ListUsers()">
    List of users <span class="caret"></span>
  </button>
  <!-- *dropdownMenu留在ul上，标识这是下拉菜单容器 -->
  <ul *dropdownMenu class="dropdown-menu" role="menu">
    <!-- 把*ngFor移到li上，循环生成每个菜单项 -->
    <li role="menuitem" *ngFor="let c of listUsers">
      <a class="dropdown-item">{{c.Firstname}} {{c.lastName}}</a>
    </li>
  </ul>
</div>

这样调整后，两个指令各司其职：*dropdownMenu负责告诉Angular这是下拉菜单的容器，*ngFor负责循环渲染每个用户条目，就不会触发那个绑定冲突的错误了。

另外提个小建议：如果你的listUsers是通过异步请求获取的（比如调用API），记得处理好数据未加载的情况——要么初始化listUsers为空数组，要么如果是Observable的话，加上| async管道，避免出现undefined的报错哦。

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