I recently started Angular and I've been stuck on this single problem.

So when the frontend loads a page, it performs a GET and fetches the following values:

getAll(fetch_id: string): Subject<Element[]> {
this.dataSource.getData(fetch_id).subscribe((elements) => {
  this.elements = elements.map((element) => ({
    id: element.element_id.toString(),
    name: element.element_name,
    fetch_method: element.fetch_method_id,
    created: element.created_at,
  }));
  this.elements$.next(this.elements);
});
return this.elements$;

My HTML is displaying like this:

<td
    class="pointer"
    mat-cell
    *matCellDef="let element"
    [routerLink]="getFetchUrl(element)"
  >
    {{ element.fetch_method }}
  </td>

My issue is: the fetch_method wil either return 1,2 or 3, which I have to represent differently in the Frontend part (if 1, the frontend must display "Automatic", if 2, it must display "Manual", if 3, it must display "Both").

Currently, my Frontend only displays 1,2 or 3.

I tried searching if I could insert and IF-ELSE statament somewhere but found nothing that could help. I would appreciate any suggestion!

CodePudding user response：

you can use enum like this:

ts file:

export enum fetchMethodEnum {
  Automatic = 1,
  Manual = 2,
  Both = 3,
}

you can create separate file for enum or add in ts file before @component

and in class bind the enum to a variable:

fetchMethod = fetchMethodEnum;

html file:

  <td  class="pointer" mat-cell *matCellDef="let element"
       [routerLink]="getFetchUrl(element)"
  >
    {{ fetchMethod[element.fetch_method] }}

based on element.fetch_method id is shown enums.