三元运算符中的多条件检查

时间:2018-06-19 14:01:34

标签: angular ionic-framework

我已经动态加载,并且想要设置特定的值,具体取决于服务中的值。我下面的代码将只检查一种情况。 我需要

if well.RecordStatus == 'P' then PROVISIONAL
if well.RecordStatus == 'v' then VERIFIED
if well.RecordStatus == 'a' then aPPROVED
if well.RecordStatus == 'R' then REJECTED

请帮助

  <ion-row *ngFor="let wellsubsurface of wellSubsurfaceData">

          <ion-col>
            <ion-label >{{wellsubsurface.CreatedBy}}</ion-label>
          </ion-col>
          <ion-col>
            <ion-label style="color: green;">{{(wellsubsurface.RecordStatus === 'P')?'PROVISIONAL':'NA'}}</ion-label>
          </ion-col>

        </ion-row>

3 个答案:

答案 0 :(得分:1)

您可以实现以下目标,

well.RecordStatus == 'P'? 'PROVISIONAL':well.RecordStatus == 'v'? 'VERIFIED' :well.RecordStatus == 'a'? 'aPPROVED':well.RecordStatus == 'R'? 'REJECTED':'NA'

答案 1 :(得分:1)

在您的情况下,我将在可以从模板调用的组件类上创建一个函数。为了保持性能,我会 memoize 函数,这意味着仅当其参数更改时才会重新执行该函数。

首先,让我们在组件类上创建一个方法,并使用memoize从lodash通过Lodash Decorators`来记住它:

@Component({...})
export class YourComponent {
  ...

  @Memoize()
  getRecordStatus(value) {
    const recordStatus = '';

    if (value.RecordStatus === 'P') {
      recordStatus = 'PROVISIONAL';
    } else if (value.RecordStatus === 'v') {
      recordStatus = 'VERIFIED';
    } else if (value.RecordStatus === 'a') {
      recordStatus = 'APPROVED';
    } else if (value.RecordStatus === 'R') {
      recordStatus = 'REJECTED';
    }

    return recordStatus;
  }
}

现在,您可以在模板中像下面这样调用此方法:

<ion-row *ngFor="let wellsubsurface of wellSubsurfaceData">
  <ion-col>
    <ion-label >{{wellsubsurface.CreatedBy}}</ion-label>
  </ion-col>
  <ion-col>
    <ion-label style="color: green;">{{ getRecordStatus(wellsubsurface) }}</ion-label>
  </ion-col>
</ion-row>

这使您的模板更具可读性和可维护性,恕我直言。在此处使用诸如备忘录之类的东西还可以保持性能,并避免执行“更改检测”时不必要的方法调用。

答案 2 :(得分:0)

-对于我来说,我有一个“ isloadingMakePayment” 标志,该标志基于我必须在该Tag上实现“加载”栏的“检查多个条件”标志。

-“ isPolicyRename” 也是我用于内部条件的标志。MeanWile“ renamePolicy” 是变量,其条件是我用来在HTML上显示的某些值页面

  • 只需使用此模式

    <a class="btn btn-orange" (click)="onMakePayment()"> <span *ngIf="isloadingMakePayment"><i class='fa fa-spinner fa-spin'></i>Loading Data...</span>{{isloadingMakePayment ? '' : isPolicyRename 'Make Payment to ' + renamePolicy : 'Make Payment' }} </a>


谢谢