Question

在我的HTML上，我有两个不同布局的div。一个是表，另一个是几个div

 <div class="firstView>
   <table class="table table-bordered">.....
     ..
    <tr *ngFor="let data of Data">
     <td>data.name</td>
    </tr>
   </table>
 </div>

 <div class="secondView">
  <div class="col-md-12" *ngFor="let data of Data">
     insert data here
  </div>

我可以使用show和hidden来显示或隐藏某些屏幕尺寸。但是因为我在这两个数据中加载数据，我认为如果我可以有一个If语句，那将显示并呈现firstView if screenize＆gt; 992px 如果它不到那个，那就是第二个。

如何将断点作为值的ngIf语句？

Answer 1

之前实际上使用了一个旧帐户作为答案，所以利用这个机会在这里用正确的帐户详细说明！

因此，如果要将窗口宽度保存为变量，可以像这样设置组件代码

class FooComponent implements OnInit {

  public currentWindowWidth: number;

  // ... 

  ngOnInit() {
    this.currentWindowWidth = window.innerWidth;
  }

  // ... 
}

在您的标记中，您可以简单地检查如下：

<div class="first" *ngIf="currentWindowWidth < 992"> 
  ... 
</div>
<div class="second" *ngIf="currentWindowWidth >= 992" > 
  ... 
</div>

修改

如果您还想对调整大小做出反应，可以按照以下步骤进行：

@HostListener('window:resize') onResize() { this.currentWindowWidth = window.innerWidth }

Answer 2

如果你真的想使用* ngIf来摆脱DOM元素本身，可以将window.innerWidth绑定到ngOnInit上的变量，然后使用它来有条件地隐藏或显示基于容器的容器在* ngIf。

如果您还关心调整大小，可以将主机侦听器绑定到窗口的resize事件，并在触发时重新分配该变量！

Angular如果屏幕高于某个断点，则显示一个div，否则显示另一个

2 个答案: