如何使用 Angular ngIf 指令来显示或隐藏元素？答案

【问题标题】：How to use Angular ngIf diretive to display or hide elements?如何使用 Angular ngIf 指令来显示或隐藏元素？
【发布时间】：2021-03-07 18:57:06
【问题描述】：

<div *ngFor = "let item of meusItems, let i=index" [ngClass]="{'selected':item[i] == i}">
    <li> Nome: {{item.item.name}}</li>
    <li> Nome: {{item.item.descricao}}</li>

    <select class="custom-select"> 
        <option *ngFor =" let soldado of meusSoldados"> {{soldado.soldado.name}}</option>
    </select>
    <button ></button>
</div>

我正在使用 ngFor 来显示我的数据库中的项目。在那个 div 里面我还显示了一个按钮和一个选择，但我只想在选择项目时显示它们。想象一下项目 1 被选中，然后显示该项目的按钮和选择，但所有其他项目都没有按钮或选择。

我想我们可能可以用一个简单的 ngIf 来做到这一点，但我不知道怎么做？任何帮助表示赞赏。

【问题讨论】：

标签： html css angular typescript angular-directive

【解决方案1】：

li 元素不是 div 元素的有效直接子元素 - 只有 ul 元素可以是 li 的直接父元素。您真正需要做的是将内容嵌套在重复的 li 中，并在其上有一个带有*ngIf 的ng-container，以便在选中该项目时有条件地显示内容。

请注意，我已按照您的逻辑确定该项目是否被选中 - 但有更好的方法。

另外 - 跨度是内联级元素 - 所以你需要样式来正确显示它们并将它们隔开 - 我会使用 flex - li 设置了 display: flex 并且可能 justify-content: space-between 到分离出跨度。

<ul class="meus-items-list">
  <li *ngFor = "let item of meusItems, let i=index" [ngClass]="{'selected':item[i] == i}">
     <span> Nome: {{item.item.name}}</span>
     <span> Nome: {{item.item.descricao}}</span>

     <ng-container *ngIf="item[i] == i">
      <select class="custom-select"> 
       <option *ngFor =" let soldado of meusSoldados"> {{soldado.soldado.name}}</option>
      </select>
     <button >Click me</button>
     </ng-container>
  </li>
</ul>

你也可以使用嵌套在 li 中的 ul / li 来做到这一点

<ul class="meus-items-list">
  <li *ngFor = "let item of meusItems, let i=index" [ngClass]="{'selected':item[i] == i}">
   <ul>
     <li> Nome: {{item.item.name}}</li>
     <li> Nome: {{item.item.descricao}}</li>

     <li *ngIf="item[i] == i">
      <select class="custom-select"> 
       <option *ngFor =" let soldado of meusSoldados"> {{soldado.soldado.name}}</option>
      </select>
     <button >Click me</button>
     </li>
    </ul>
  </li>
</ul>

您甚至可以单独使用 CSS 来做到这一点 - 只需将 display none 应用于除所选元素之外的所有 li 中的 select 和 button 元素。这仍然会在 DOM 中包含这些元素，所以可能不是我首先想到的。

li:not(.selected) select,
li:not(.selected) button {
   display: none;
}

【讨论】：

[ngClass]="{'selected':item[i] == i}" 我想我弄错了，你能解释一下它是如何工作的吗？跨度>
您通常会做的是在每个项目的数据上设置 selected: true / false 的属性，以便单击布尔属性为行项目设置并将类设置为 - [ ngClass]="{'selected': iitem.selected == true}" 。或者您可以创建一个变量 - 例如 selectedItemIndex - 并在单击项目时设置其值（将其设置为所选项目的索引） - 然后您将每次迭代的索引与 selectedItemIndex 进行比较并设置“选定”类为 [ngClass]="{'selected': i == selectedItemIndex}"
我最终做了一个有索引的变量，我比较了按钮上的索引，更容易阅读！谢谢！
很高兴我能帮上忙，编码愉快 :)

【解决方案2】：

例如，这是一个示例代码：

HTML：

<div *ngIf="selected" class="alert alert-success box-msg" role="alert">
        <strong>List Saved!</strong> Your changes has been saved.
</div>

TS：

export class AppComponent implements OnInit{

  (...)
  public selected = false;
  (...)
  saveTodos(): void {
   //show box msg
   this.selected= true;
   //wait 3 Seconds and hide
   setTimeout(function() {
       this.selected= false;
       console.log(this.selected);
   }.bind(this), 3000);
  }
}

【讨论】：