Ngif与图像Angular2

Question

I have 5 'pages' like

http://localhost:4201/app?part=1
http://localhost:4201/app?part=2
http://localhost:4201/app?part=3
....

And I have 5 images, and I would like to match each image to each page with help of ngIf (if it is possible).

For this purpose in my Component I have this line, which tells me which part do I have now

  ngOnInit() {
    this.pageNumber = this.activatedRoute.snapshot.queryParams["part"];
}

Also I have in my Component

myImg = '../../assets/image1.jpg'; 

And in template I have

<img [src]="myImg"/>

What I want to have is like logic like

if pageNumber = 1 then <img [src]="myImg1"/>
if pageNumber = 2 then <img [src]="myImg2"/>
if pageNumber = 3 then <img [src]="myImg3"/>

and so on...

Could you please tell me how could I write ngIf statement in my case? I tried examples from documentation, but none of them worked for me .

Answer 1

You don't need a condition. Instead, put only one picture, and set its source like this

<img [src]="myPathToImage + imageNumber + imageExt" />

In your controller

myPathToImage = "../../assets/image";
imageNumber = this.activatedRoute.snapshot.queryParams["part"];
imageExt = ".jpg";

By the way, if you are using angular CLI and didn't touche the folder structure, I think that your path is assets/... and not ../../assets/...

Answer 2

It's good practice to manipulate data inside the Component class and not on the Template

In your component's class you could do:

ngOnInit(){
    let pageNumber = this.pageNumber = this.activatedRoute.snapshot.queryParams["part"];
    this.imageToBeDisplayedOnTemplate = `myImg${pageNumber}.jpg`
}

Then on your template:

<img [src]="imageToBeDisplayedOnTemplate"/>