Html 如何使用Angular ngIf diretive显示或隐藏元素？ Nome:{{item.item.name} Nome:{{item.item.descripcao}} {{soldado.soldado.name}

我正在使用ngFor显示数据库中的项目。在该div中，我还显示了一个按钮和一个select，但我只想在选中项目时显示它们。 假设选择了项目1，则该项目将显示按钮和选择，但所有其他项目都没有按钮或选择

我想我们可以用一个简单的ngIf来实现，但我不知道怎么做？

---

非常感谢您的帮助。

一个

li

元素不是div元素的有效直接子元素-只有

ul

元素可以是

li

的直接父元素。您真正需要做的是将内容嵌套在重复li中，并在其上有一个带有

*ngIf

的

ng容器，以便在选择项目时有条件地显示内容

请注意，我已经按照您的逻辑来确定是否选中了该项目，但是有更好的方法来实现这一点

此外-跨距是内联级别的元素-因此您将需要样式来正确显示跨距，并将其隔开-我将使用flex-在li上设置display:flex，并可能调整content:space来分隔跨距

<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>

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

请注意，我已经按照您的逻辑来确定是否选中了该项目，但是有更好的方法来实现这一点

此外-跨距是内联级别的元素-因此您将需要样式来正确显示跨距，并将其隔开-我将使用flex-在li上设置display:flex，并可能调整content:space来分隔跨距

<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>

例如，这是一个示例代码，它是如何显示的：

HTML:

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

例如，这是一个示例代码，它是如何显示的：

HTML:

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进行比较，并将'selected'类设置为[ngClass]=“{'selected'：i==selectedItemIndex}”最后我做了一个有索引的变量，我比较了按钮上的索引，更容易阅读！谢谢！很高兴我能提供帮助，很高兴编码：）[ngClass]=“{'selected'：item[I]==I}”我想我弄错了，你能解释一下它是如何工作的吗？你通常会做的是在每个项目的数据上设置一个属性selected:true/false，所以在点击时，布尔属性被设置为行项目，并将类设置为-[ngClass]=“{'selected'：iitem.selected==true}”。或者，您可以创建一个变量（例如selectedItemIndex），并在单击项目时设置其值（将其设置为所选项目的索引），然后将每次迭代的索引与selectedItemIndex进行比较，并将“selected”类设置为[ngClass]=“{'selected'：i==selectedItemIndex}”最后我做了一个有索引的变量，我比较了按钮上的索引，更容易阅读！谢谢！很高兴我能帮忙，很高兴编码：）
<div *ngIf="selected" class="alert alert-success box-msg" role="alert">
        <strong>List Saved!</strong> Your changes has been saved.
</div>

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