如果屏幕高于某个断点则成角度，显示一个格，否则显示另一个格

Question

在我的html上，我有两个具有不同布局的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 and hidden来以某些屏幕尺寸显示或隐藏它们。但是，由于我在两个文件中都加载了数据，所以我认为最好有一个If语句，如果screensize> 992px，则显示并渲染firstView，如果小于，则显示secondView。

如何使用带有断点作为值的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
}