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

Question

<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 中，我还显示了一个按钮和一个 select，但我只想在项目被 selected 时显示它们。假设项目 1 是 selected，然后显示该项目的按钮和 select，但所有其他项目都没有按钮或 select.

我想我们可以用一个简单的 ngIf 来完成，但我不知道怎么做？感谢任何帮助。

Answer 1

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

请注意，我已按照您的逻辑确定该项目是否已 selected - 但有更好的方法可以做到这一点。

此外 - 跨度是内联级别元素 - 因此您需要样式来正确显示它们并 space 它们出来 - 我会使用 flex - li 设置了 display: flex 并且可能证明 - 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 来做到这一点 - 只需将显示 none 应用于所有 li 中的 select 和按钮元素，selected 元素除外.这仍然会在 DOM 中包含这些元素，所以我可能不是第一个想到如何去做的人。

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

Answer 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);
  }
}

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

How to use Angular ngIf diretive to display or hide elements?

html

css

typescript

angular-directive

angular