Angular 5中如何在*ngIf中使用动态字符串变量的属性名

这事儿其实很简单，核心就是利用JavaScript的方括号属性访问语法，结合你的动态变量chosenPeriod来拼接目标属性名就行。给你两种实用的实现方式：

方法一：模板内直接拼接（快速实现） #

Angular模板支持直接使用方括号访问对象属性，你可以直接在*ngIf里把chosenPeriod和_status拼接起来，指向person对应的属性：

<!-- 用字符串拼接的方式，兼容Angular 5所有场景 -->
<div *ngIf="person[chosenPeriod + '_status'] === 'applied'">
  当选中周期的状态为applied时显示这段内容
</div>

<!-- 如果你的环境支持模板字符串，也可以这么写 -->
<div *ngIf="person[`${chosenPeriod}_status`] === 'placed'">
  当选中周期的状态为placed时显示这段内容
</div>

方法二：组件内封装辅助方法（更易维护） #

如果后续需要对状态做额外处理（比如处理person为空的情况、给默认值），或者模板里要多次用到这个逻辑，推荐在组件里写一个辅助方法，这样模板更简洁，也更符合Angular的最佳实践：

首先在组件类里添加方法：

// 传入周期名称，返回对应的状态
getPeriodStatus(period: string): string {
  // 先判断person是否存在，避免空指针报错
  if (!this.person) return '';
  // 拼接属性名并返回对应值，没有的话返回空字符串
  return this.person[`${period}_status`] || '';
}

然后在模板里调用这个方法：

<div *ngIf="getPeriodStatus(chosenPeriod) === 'applied'">
  选中周期状态为applied时显示
</div>

注意事项 #

• 确保chosenPeriod的值是严格匹配的字符串（比如"period1"、"period2"），不然会返回undefined，*ngIf会判定为false；
• 方法二的优势在于可以统一处理异常情况（比如person未加载完成时），避免模板报错，也方便后续扩展逻辑。

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