如何在 Angular 中創建隱藏和顯示視頻的條件？

Question

在我們的主頁上，我們有一個視頻演示。 我想知道如何在包含視頻的每個產品頁面中復制此視頻，如果產品沒有視頻，則應隱藏視頻。

Answer 1

您可以在視頻容器上使用*ngIf語句，條件是產品是否有視頻。

Answer 2

要創建條件，您可以使用 *ngIf 指令並在 HTML 頁面中提供您的條件。 這里我提供了一個示例代碼供您參考

HTML：

<div class="container" style="max-width: 550px">
    <h2 class="text-center mb-5">Angular Login with Google</h2>
  
    <div *ngIf="isVideo === false">
      <p>No Video found</p>
    </div>
  
    <div *ngIf="isVideo === true">
      <video width="320" height="240" controls>
        <source src="movie.mp4" type="video/mp4">
     </video>
  </div>

component.ts 中的方法：

ngOnInit(): void {
  this.Service.getvideos.subscribe((videoid) => {
      this.isVideo = (videoid != null);
      
    });
  }