小编lon*_*tly的帖子

Angular V17：@if 与 ngIf 的前景 – ngIf 将来会被弃用吗？

在新版本的 Angular V17 中，该@if指令可以用来替代ng-container，这真是太棒了。不过，有时*ngIf更简洁，比如判断是否显示按钮时：

<button *ngIf="loaded">OK</button>

Run Code Online (Sandbox Code Playgroud)

所以我想问一下，前景如何*ngIf？*ngIfAngular 会在未来的版本中完全放弃吗？

即使上面的代码看起来不像以前那么优雅，我们是否应该*ngIf用now 替换所有实例？@if

@if(loaded){ 
    <button>OK</button>
}

Run Code Online (Sandbox Code Playgroud)

html if-statement angular angular17

lon*_*tly

2024 02-17

8
推荐指数

1
解决办法

4926
查看次数

flex-grow 不扩展弹性项目

首先，我使用 Flexbox 创建一个布局：

<html>
  <body>
    <div id="header"></div>
    <div id="main"></div>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

header div 有一个固定的height: 60px，而 main div 则占据屏幕的剩余高度：

html, body{
  100%;
}
body{
  display: flex;
  flex-direction: column;   
}
#header{
  height: 60px;
  flex-grow: 0;
}
#main{
  flex-grow: 1;
}

Run Code Online (Sandbox Code Playgroud)

我得到了我想要的：

标题和主 div

然后我想在div内显示三个盒子#main：box_1、box_2和box_3。box_1 和 box_3 具有相同的高度值，box_2扩展自身以获取的剩余高度#main：

我想要的是：

我添加以下代码：

<html>
  <body>
    <div id="header"></div>
    <div id="main">
      <div id="box_1"></div>
      <div id="box_2"></div>
      <div id="box_3"></div>
    </div>
  </body>
</html>

#main{
  flex-grow: 1;
  flex-direction: column;
}
#box_1, #box_3{
    height: 60px;
    flex-grow: 0;
    background-color: …

Run Code Online (Sandbox Code Playgroud)

html css flexbox

lon*_*tly

2018 08-26

6
推荐指数

1
解决办法

1万
查看次数