Angular 单击按钮时显示/隐藏iframe

我有一个既定的应用程序，我想分叉。 我添加了.html、.component.ts、.module.ts，如下所示。 我认为我的问题很简单，但我不知道如何用Angular编写代码。 我想添加一个按钮，允许我隐藏/如何隐藏iframe（按钮1:iframe 1/按钮2:iframe 2）。 我只加了一个按钮。按钮显示出来了，但当我点击它时，我什么也看不到。 你能帮我处理这件事吗

.module.ts： .component.ts： .html

Show

试试这个

在模板中

    <button (click)="hideElement()">Show</button>
    <div #f1>
        <iframe src="http://myiframe" WIDTH = 1850 HEIGHT= 970 >
        </iframe>
    </div>

    <div #f2>
         <iframe src="http://myiframe2" WIDTH = 1850 HEIGHT= 970 >
         </iframe>
    </div>

---

您可以在代码中执行此操作。。。
在HTML中

---

谢谢你的回复，我复制了你的代码，但那不起作用。我忽略了问题在哪里！你有错误吗？尝试在

hideElement（）

中放置一个

deugger

并调试代码我得到的代码是：TypeError:cannotread属性'nativeElement'的undefined我在应用程序中找到它我想要fork:export declare class ElementRef{nativeElement:T；constructor（nativeElement:T）；}现在检查。。我更新了答案。我在html按钮中使用了

onclick

而不是

（单击）

，谢谢！但是如果我有4个iframe，我想添加4个按钮，每个按钮都会显示一个iframe？

import { 
        Component,
        OnInit } from '@angular/core';
    @Component({
         selector: 'mui-App',
        templateUrl: 'App.component.html'
    })  
    export class AppComponent implements OnInit{ 
    public ngOnInit() {
        var x = document.getElementById("f1");
        if (x.style.display === "none") {
            x.style.display = "block";
       } else {
            x.style.display = "none";
        }
    }    
    }

<button onclick="ngOnInit()">Show</button>
    <div id="f1">
        <iframe src="http://myiframe" WIDTH = 1850 HEIGHT= 970 >
        </iframe>
    </div>

    <div id="f2">
         <iframe src="http://myiframe2" WIDTH = 1850 HEIGHT= 970 >
         </iframe>
    </div>

    <button (click)="hideElement()">Show</button>
    <div #f1>
        <iframe src="http://myiframe" WIDTH = 1850 HEIGHT= 970 >
        </iframe>
    </div>

    <div #f2>
         <iframe src="http://myiframe2" WIDTH = 1850 HEIGHT= 970 >
         </iframe>
    </div>

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

@Component({
  selector: 'mui-App',
  templateUrl: 'App.component.html'
})

export class AppComponent implements AfterViewInit {

  @ViewChild('f1') f1: ElementRef;
  @ViewChild('f2') f2: ElementRef;

  public ngAfterViewInit(): void {
    this.hideElement()
  }

  public hideElement(): void {
    if (this.f1.nativeElement.style.display === "none") {
      this.f1.nativeElement.style.display = "block";
    } else {
      this.f1.nativeElement.style.display = "none";
    }
  }
}

<button (click)="showMe =! showMe">Show</button>
<div *ngIf="showMe">
    <iframe src="http://myiframe" WIDTH = '1850' HEIGHT= '970' >
    </iframe>
</div>

<div *ngIf="!showMe">
     <iframe src="http://myiframe2" WIDTH = '1850' HEIGHT= '970' >
     </iframe>
</div>

public showMe = false;