Question

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

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>

Answer 1

您可以实现以下目标，

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

Answer 2

在您的情况下，我将在可以从模板调用的组件类上创建一个函数。为了保持性能，我会 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>

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

Answer 3

-对于我来说，我有一个“ 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>

谢谢

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

3 个答案: