Angular 17：如何在条件判断中嵌套数量判断实现字符串拼接

开发者阿泽

2026-6-25

解决方案

你可以通过嵌套三元运算符或者更清晰的分支语句实现需求，同时兼顾quantity可选属性的边界情况，以下是具体实现：

简洁版（嵌套三元运算符）

const desc = this.monthly?.label 
  ? (this.monthly.quantity && this.monthly.quantity > 1 
      ? `${this.monthly.quantity} ${this.monthly.label}` 
      : this.monthly.label) 
  : 'No label';

易读版（if-else分支）

如果觉得嵌套三元不够直观，也可以拆成分支结构：

let desc: string;
if (!this.monthly?.label) {
  desc = 'No label';
} else {
  const shouldShowQuantity = this.monthly.quantity && this.monthly.quantity > 1;
  desc = shouldShowQuantity ? `${this.monthly.quantity} ${this.monthly.label}` : this.monthly.label;
}