How to use ngIf inside of ngFor-CodePudding

I am very new to angular and have been out of touch with coding since college, so I appreciate your patience.

Objective

I am trying to concatenate 3 columns into a 4th column
I am trying to apply ngIf to the 1st column
First column can have 2 values, based on those 2 values I want to able to modify column 1

Example:

interface siteInterface {
  audience:string;
  country:string;
  language:string;
}
    const siteArray:siteInterface[]=[
      {
        audience:'abc',
        country:'us',
        language:'en',
      },
      {
        audience:'uvw',
        country:'de',
        language:'de',
      }
    ]
const baseUrlConst = 'https://www.testwebsite.com/'
export class AppComponent implements OnInit {
  constructor() {}
  ngOnInit() {}
  siteUrl=siteArray;
  baseUrl=baseUrlConst;
}

I am able to loop through the array like this:

<table >
  <thead>
    <tr>
      <th>Audience</th>
      <th>Country</th>
      <th>Language</th>
      <th>Concat</th>
    </tr>
  </thead>
  <tbody>
  <tr *ngFor="let i of siteUrl; let b =index">
    <td>{{i.audience}}</td>
    <td>{{i.country}}</td>
    <td>{{i.language}}</td>
    <td>{{(baseUrl) (i.audience "/") (i.country "/") (i.language)}}</td>
  </tr>
  </tbody>
</table>

What I am trying to do now is, based on the i.audience value, I want to be able to change the value of audience.

For example: IF i.audience = 'abc' THEN set i.audience = 'abcdef' ELSE IF i.audience = 'uvw' THEN set i.audience = 'uvwxyz' ELSE null

CodePudding user response：

If you want to update the data of the siteUrl object, then you have to process it. If you instead want to show different data in your table but keep the values of your original data of your siteUrl obejct, then you can use for example *ngIf.

However, here is solution 1: Actual Data manipulation

// app.component.ts
export class AppComponent implements OnInit {

    constructor() {}

    ngOnInit() {
        baseUrl=baseUrlConst;  
        siteUrl=siteArray.map(item => {
            switch(item.audience) {
                case 'abc':
                    item.audience = 'abcdef';
                    break;
                case 'uvw':
                    item.audience = 'uvwxyz';
                    break;
                default:
                    item.audience = null;
            }
            return item;
        });
    }
}

this way, you update the actual data and dont need to change your html. But if you want to keep the data but just present different content in your table, then you can use *ngIf for example like this:

Solution 2: Keeping the data unmanipulated but present different data:

...
<tr *ngFor="let i of siteUrl; let b =index">
    <td *ngIf="i.audience == 'abc'">abcdef</td>
    <td *ngIf="i.audience == 'uvw'">uvwxyz</td>
    <td *ngIf="i.audience != 'abc' && i.audience != 'uvw'">null</td>
    <td>{{i.country}}</td>
    <td>{{i.language}}</td>
    <td>{{(baseUrl) (i.audience == 'abc' ? 'abcdef' : i.audience == 'uvw' ? 'uvwxyz' : 'null' "/") (i.country "/") (i.language)}}</td>
</tr>
...

CodePudding user response：

You can use ternary operator as below. This is just for display, if you want to change the data in model, massage data in the components ts only.

{{i.audience === 'abc'? 'abcdef':i.audience === 'uvw'? 'uvwxyz' : 'some other value' }}