Ngif與圖像Angular2

Question

我有5個“頁面”，例如

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

我有5張圖片，我想在ngIf幫助下（如果可能）將每張圖片與每個頁面匹配。

為此，在我的組件中有這一行，它告訴我現在有哪一部分

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

我的組件中也有

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

在模板中

<img [src]="myImg"/>

我想要擁有的就像邏輯一樣

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

等等...

您能告訴我如何編寫ngIf語句嗎？ 我嘗試了文檔中的示例，但沒有一個對我有用。

Answer 1

您不需要條件。 相反，只放置一張圖片，並像這樣設置其來源

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

在您的控制器中

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

順便說一句，如果您使用的是角度CLI且未涉及文件夾結構，我認為您的路徑是assets/...而不是../../assets/...

Answer 2

優良作法是在Component類而不是Template中處理數據

在組件的類中，您可以執行以下操作：

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

然后在您的模板上：

<img [src]="imageToBeDisplayedOnTemplate"/>