HTML - 从文件输入中自动显示元素[关闭]

Question

我正在与 PrimeNG 一起在 Angular 项目中工作

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

我前面的一个例子：

现在我想做的是当用户打开该组件时，可以自动观看图像或视频。 PrimeNG 或 html 中是否有一些我可以使用的元素？

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

• 版本角：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();
  }
}