Angular多条件ngIf指令解析错误排查及库存等级判断实现求助

错误原因 #

1. 模板表达式语法错误：第三个*ngIf的条件product.quantity > 50 or <=200不符合Angular规则：
   • Angular模板中逻辑与运算符是&&，而非or（此处需要同时满足两个条件，应使用逻辑与）
   • 条件不能省略左侧变量，每个比较都要完整声明product.quantity
2. 文本内容与需求不符+拼写错误：部分提示文本未匹配需求，且“Sufficent”拼写错误，应为“Sufficient”

修正后的HTML代码片段 #

重点修改<td>中库存等级判断的部分：

<td>
    <p *ngIf="product.quantity <= 50">Lower Inventory Level</p>
    <p *ngIf="product.quantity > 200">Sufficient Inventory Level</p>
    <p *ngIf="product.quantity > 50 && product.quantity <= 200">Average Inventory Level</p>
</td>

优化建议（可选） #

如果条件较多，用ngSwitch会更清晰，避免多个*ngIf嵌套：

<td [ngSwitch]="true">
    <p *ngSwitchCase="product.quantity <= 50">Lower Inventory Level</p>
    <p *ngSwitchCase="product.quantity > 200">Sufficient Inventory Level</p>
    <p *ngSwitchDefault>Average Inventory Level</p>
</td>

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