带图像的 Ngif Angular2

Question

我有 5 个 'pages' 喜欢

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 语句吗？我尝试了文档中的示例，但其中 none 对我有用。

Answer 1

你不需要条件。相反，只放一张图片，然后这样设置它的来源

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

在你的控制器中

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

顺便说一下，如果您使用的是 angular CLI 并且没有触及文件夹结构，我认为您的路径是 assets/... 而不是 ../../assets/...

Answer 2

在组件 class 而不是模板

中操作数据是一种很好的做法

在你的组件中 class 你可以这样做：

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

然后在您的模板上：

<img [src]="imageToBeDisplayedOnTemplate"/>

带图像的 Ngif Angular2

Ngif with images Angular2

typescript

angular-ng-if

angular