Question

您好我有以下代码来显示图像。

<div  *ngFor="let image of images" >
   <span *ngIf="    ">  //if img=t.jpg display this line
  <label>JPEG Image</label><img src='{{image.img}}'/>
   </span>
      <span *ngIf="    "> // if img=t.jpg dont display this line
  <label>PNG Image</label><img src='{{image.img}}'/>
   </span>
</div>

我想设置条件，如果图像扩展名为.jpg，即image.jpg我希望JPEG行显示，如果是.png，即image.png，我想要显示PNG图像行。请让我知道如何在* ngIf中读取图像/文件的扩展名感谢

Answer 1

以下是示例代码，请检查

StackBitz url

<强>组件

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 6';
   images = [
    {
      img: 'https://upload.wikimedia.org/wikipedia/commons/b/b4/JPEG_example_JPG_RIP_100.jpg',
    },
    {
      img: 'https://vignette.wikia.nocookie.net/fantendo/images/6/6e/Small-mario.png',
    }
  ];
  public getExstendsion(image) {
    if (image.endsWith('jpg') || image.endsWith('jpeg')) {
      return 'jpg';
    }
    if (image.endsWith('png')) {
      return 'png';
    }
  }
}

<强> HTML

 <div  *ngFor="let image of images" >

   <span *ngIf="(getExstendsion(image.img) == 'jpg') || getExstendsion(image.img) == 'jpeg'"> 
  <label>JPEG Image</label><img src='{{image.img}}'/>
   </span>
      <span *ngIf="getExstendsion(image.img) == 'png'"> 
  <label>PNG Image</label><img src='{{image.img}}'/>
   </span>
</div>

Answer 2

假设image.img包含字符串：

<强>打字稿

// this checks if it ends with .jpg or .jpeg and returns true if so
func isJPG(name) {
  return name.endsWith('jpg') || name.endsWith('jpeg')
}
// same, but for png
func isPNG(name)
  return name.endsWith('png')
}

html模板

*ngIf="isJPG(image.img)"

注意：从内存中输入，如果我的函数语法关闭，请道歉。一般的想法应该仍然有效。创建方法，使用endsWith()方法检查字符串，在*ngIf=

上的模板中应用方法

Angular 2/4显示基于连续扩展的图像

2 个答案: