Angular - displaying text based on comparing with array values in template-CodePudding

I have two arrays in my .ts file which were formed based on specific condition matching

this.successIds = [1234, 2345, 3456];
this.failIds = [123, 234, 345];

In my HTML file, I have a grid column where I need to compare it's Id in each row with above Ids from the arrays and show the respective text

  <kendo-grid-column *ngIf="isEditClicked" field="status" title="STATUS" width="70">        
    <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-column="column">         
      <span *ngIf="dataItem.attributeId == <if found in successIds array>">Success </span>
      <span *ngIf="dataItem.attributeId == <if found in failIds array>">Fail </span>
    </ng-template>        
  </kendo-grid-column>

How can I do this comparison in the template and show the respective message. Please suggest. Thanks.

CodePudding user response：

You have a few options on how to tackle this. Your best bet would be to use Set (last example).

Option 1 (slow)

<kendo-grid-column *ngIf="isEditClicked" field="status" title="STATUS" width="70">
  <ng-template kendoGridEditTemplate let-dataItem="dataItem" let-column="column">
    <span *ngIf="isInSuccess(dataItem.attributeId)">Success </span>
    <span *ngIf="isInFail(dataItem.attributeId)">Fail </span>
  </ng-template>
</kendo-grid-column>


class YourComponent {
  successIds = [1234, 2345, 3456];
  failIds = [123, 234, 345];
  
  isInSuccess(value: number): boolean {
    return this.successIds.includes(value);
  }
  
  isInFail(value: number): boolean {
    return this.failIds.includes(value);
  }
}

Option 2 (faster)

The following will be a lot better in terms of performance:

class Foobar {
  // successIds = [1234, 2345, 3456];
  // failIds = [123, 234, 345];

  // Lookup-object that stores the id as key and `true` (=success) or `false` (=failed) as value.
  idMap = {
    1234: true,
    2345: true,
    3456: true,

    123: false,
    234: false,
    345: false,
  }
  
  isInSuccess(value: number): boolean {
    return this.idMap[value] === true;
  }
  
  isInFail(value: number): boolean {
    return this.idMap[value] === false;
  }
  
  addToSuccess(value) {
    // used to be
    // this.successIds.push(value);
    
    // now becomes
    this.idMap[value] = true;
  }
  
  addToFail(value) {
    // used to be
    // this.failIds.push(value);
    
    // now becomes
    this.idMap[value] = false;
  }
}

I also added an example on how I guess you pushed the elements into the respective array and how to do that using an object instead.

Option 3 (fastest modern)

class Foobar {
  successIds = new Set([1234, 2345, 3456]);
  failIds = new Set([123, 234, 345]);

  isInSuccess(value: number): boolean {
    return this.successIds.has(value);
  }

  isInFail(value: number): boolean {
    return this.failIds.has(value);
  }

  addToSuccess(value: number) {
    this.successIds.add(value);
  }

  addToFail(value: number) {
    this.failIds.add(value);
  }
}