如何合理封装Angular 5中*ngFor指令内使用的显示逻辑？

嘿，作为Angular新手碰到这种动态绑定的需求太正常啦！我来帮你梳理几种靠谱的解决方案，完全贴合你的场景～

你的核心需求是：在*ngFor循环的列表项中，根据组件里isOK(item)函数的布尔返回值，动态设置<a>标签的href属性对吧？下面是几种实用的实现方式：

方案1：模板内直接用三元表达式（最简洁） #

直接在属性绑定里通过三元运算符判断，一步到位：

<ul>
  <li *ngFor="let item of itemList">
    <a [href]="isOK(item) ? '/valid-path/' + item.id : 'javascript:void(0)'">
      {{ item.title }}
    </a>
  </li>
</ul>

• 当isOK(item)返回true时，使用带item ID的有效路径；
• 返回false时，用javascript:void(0)阻止跳转，你也可以换成空字符串''或者其他无效链接，按需调整。

方案2：组件内封装URL生成方法（更易维护） #

如果逻辑后续可能变复杂，把URL生成逻辑放到组件类里，让模板更干净：

组件类代码 #

// 假设你的item类型是自定义的，这里用any示例
getItemHref(item: any): string {
  return this.isOK(item) ? `/valid-path/${item.id}` : 'javascript:void(0)';
}

模板代码 #

<ul>
  <li *ngFor="let item of itemList">
    <a [href]="getItemHref(item)">
      {{ item.title }}
    </a>
  </li>
</ul>

这种方式符合Angular关注点分离的最佳实践，逻辑集中在组件类，模板只负责展示，后续修改逻辑不用动模板。

方案3：根据逻辑切换元素（优化用户体验） #

如果isOK(item)为false时，你不希望显示可点击的链接，而是普通文本，可以用*ngIf切换元素：

<ul>
  <li *ngFor="let item of itemList">
    <a *ngIf="isOK(item)" [href]="'/valid-path/' + item.id">
      {{ item.title }}
    </a>
    <span *ngIf="!isOK(item)" class="non-clickable">{{ item.title }}</span>
  </li>
</ul>

这样避免用户点击无效链接，体验更友好。

额外小贴士 #

• 确保isOK()是纯函数：相同输入返回相同输出，Angular变更检测会频繁调用模板里的方法，纯函数能避免性能问题或意外行为；
• 优先用RouterLink（如果是路由跳转）：如果你的链接是Angular路由内的跳转，建议用[routerLink]替代href，比如：

  <a *ngIf="isOK(item)" [routerLink]="['/valid', item.id]">{{ item.title }}</a>
  

  这样能保留单页应用的无刷新跳转特性。

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