HTML

Question

我正在与 PrimeNG

一起在 Angular 项目中工作

我会解释我的项目。我有一个 Angular 组件，我在其中列出了文件名（输入标签）。这些文件在数据库中，我通过 API 获取它们可以是 img、视频、代码...到目前为止一切顺利。

我前面的例子：

现在我想做的是当用户打开那个组件时，可以自动观看图片或视频。 PrimeNG 或 html 中是否有我可以用于此目的的元素？

我知道 <video> 标签或 <img> 标签。但我想要一个不依赖于它是视频、图像还是代码的标签html。

版本Angular：8.2.14
PrimeNG 版本：8.1.1

Answer 1

如果你知道文件的扩展名，你可以使用 ngIf 指令来显示元素。

在您的 html 中，您可以根据需要添加许多标签。

<img   *ngIf="getFileExtention()=='jpeg'" src="file_name"  width="500" height="600">
<img   *ngIf="getFileExtention()=='png'" src="file_name"  width="500" height="600">
<img    src="file_name"  width="500" height="600">
<video  *ngIf="getFileExtention()=='mp4' || getFileExtension()=='flv'" width="320" height="240" controls>
  
</video>

在您的组件中

import { Component, OnInit } from '@angular/core'; 

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  file_name="abc.png";
  ngOnInit(): void {
    
  } 

  getFileExtention():string{
    return this.file_name.split('.').pop();
  }
}

HTML - 自动显示来自文件输入的元素

HTML - Show an element automatically from a file input

typescript

primeng

angular