Ngif與圖像Angular2

我有5個「頁」像Ngif與圖像Angular2

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聲明在我的情況？我從文檔中嘗試了一些例子，但是他們都沒有爲我工作。

來源

2017-07-12 Anna F

你不需要一個條件。相反，把只有一張圖片，並設置它的來源是這樣

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

在你的控制器

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

順便說一句，如果你使用的角度CLI並沒有德勤的文件夾結構，我認爲你的路徑是assets/...而不是../../assets/...

來源

2017-07-12 08:32:04 trichetriche

這是很好的做法，操縱組件類中，而不是在模板數據

在組件的類，你可以這樣做：

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

然後在您的模板：

<img [src]="imageToBeDisplayedOnTemplate"/>

來源

2017-07-12 08:37:46 wbtubog

Ngif與圖像Angular2

回答

相關問題