如何隐藏离子项目？答案

【问题标题】：How can I hide ionic item?如何隐藏离子项目？
【发布时间】：2018-10-30 02:37:42
【问题描述】：

我有一些输入字段。但是输入字段一次会显示一次。我会得到我需要显示的信息，如下所示。

require_nid:false
require_pin:true

发件人在下面

<ion-col>
          <ion-list inset>
            <ion-item>
              <ion-label>
                  <ion-icon name="person"></ion-icon>
              </ion-label>
              <ion-input type="text" placeholder="Enter NID" #username required></ion-input>
            </ion-item>
            <ion-item>
              <ion-label>
                  <ion-icon name="person"></ion-icon>
              </ion-label>
              <ion-input type="text" placeholder="Enter sender Name" #password required></ion-input>
            </ion-item>
            <ion-item>
              <ion-label>
                  <ion-icon name="phone-portrait"></ion-icon>
              </ion-label>
              <ion-input type="text" placeholder="Enter sender phone number" #password required></ion-input>
            </ion-item>
          </ion-list>
        </ion-col>

【问题讨论】：

标签： angular ionic-framework

【解决方案1】：

在 Ionic 4 中，您可以使用 ion-hide 以及添加断点来根据屏幕宽度确定何时隐藏。

确保已将正确的 css 文件导入到 global.css

@import '~@ionic/angular/css/display.css';

https://ionicframework.com/docs/layout/css-utilities#element-display

【讨论】：

【解决方案2】：

您可以使用*ngIf 完全删除该元素。

或

你可以使用[hidden]属性来显示或隐藏元素

Refer this link.

【讨论】：

*ngIf 通常是从填充、定位等中完全删除它的最干净的方法。除非你把它放在具有大量渲染的东西上（很多孩子），否则开销不是很高.