Angular中如何调整NgIf逻辑适配多字段的条件文本展示需求

需求场景 #

原有代码实现了提交买卖方向、数量后，展示对应买入/卖出+数量提示内容的逻辑，现在新增了限价字段，需要在提示中追加限价信息。

调整方案 #

可根据是否需要兼容「未填限价时的旧展示格式」选择对应的实现方式：

方案1：兼容新旧两种展示场景（未填限价时仅展示数量，填了则追加限价）

<div class="card mb-4" *ngIf='currentView == 1 && order.quantity > 0 && order.sense != ""'>
  <div class="card-body">
    <div class="row ml-0 mb-4">
      <ng-container *ngIf="order.sense === 'A'">
        买入 {{ order.quantity }}
        <ng-container *ngIf="order.limit && order.limit > 0"> - 限价 {{ order.limit }}</ng-container>
      </ng-container>
      <ng-container *ngIf="order.sense === 'V'">
        卖出 {{ order.quantity }}
        <ng-container *ngIf="order.limit && order.limit > 0"> - 限价 {{ order.limit }}</ng-container>
      </ng-container>
    </div>
  </div>
</div>

方案2：仅展示带限价的新格式（必须填写限价才展示提示卡片）

<div class="card mb-4" *ngIf='currentView == 1 && order.quantity > 0 && order.sense != "" && order.limit > 0'>
  <div class="card-body">
    <div class="row ml-0 mb-4">
      <ng-container *ngIf="order.sense === 'A'">买入 {{ order.quantity }} - 限价 {{ order.limit }}</ng-container>
      <ng-container *ngIf="order.sense === 'V'">卖出 {{ order.quantity }} - 限价 {{ order.limit }}</ng-container>
    </div>
  </div>
</div>

调整说明 #

代码内的英文提示已经替换为中文表述，符合中文展示需求。如果你的限价字段允许为0或者非数值格式，可以自行修改order.limit > 0的判断条件适配业务规则。

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