[英]How to use Angular ngIf diretive to display or hide elements?
<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>
I am using a ngFor to display the items of my database.我正在使用 ngFor 来显示我的数据库中的项目。 Inside that div i also show a button and a select, but i only want to display them when the item is selected.在那个 div 中,我还显示了一个按钮和一个选择,但我只想在选择项目时显示它们。 Imagine item 1 is selected, then the button and select is displayed for that item, but all others have no button or select.想象一下项目 1 被选中,然后显示该项目的按钮和选择,但所有其他项目都没有按钮或选择。
I imagine that we can probably do it with a simple ngIf but im not seeing how?我想我们可能可以用一个简单的 ngIf 来做到这一点,但我不知道怎么做? Any help is appreciated.任何帮助表示赞赏。
An li
element is not a valid direct child of a div element - only a ul
element can be a direct parent of an li
. li
元素不是 div 元素的有效直接子元素 - 只有ul
元素可以是li
的直接父元素。 what you really need to do is to nest the content inside the repeating li and have an ng-container
with an *ngIf
on it to conditionally show the content if the item is selected.您真正需要做的是将内容嵌套在重复的 li 中,并在其上有一个带有*ngIf
的ng-container
, *ngIf
在选择项目时有条件地显示内容。
Note that I have followed your logic to determine if the item is selected - but there are better ways of doing that.请注意,我已经按照您的逻辑来确定是否选择了该项目 - 但有更好的方法来做到这一点。
Also - spans are inline level elements - so you will need styling to display themn correctly and space them out - I would use flex - with the li having display: flex set on it and perhaps justify-content: space-between to separate out the spans.此外 - 跨度是内联级别元素 - 所以你需要样式来正确显示它们并将它们隔开 - 我会使用 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>
You could also do this with a ul / li nested inside the li您也可以使用嵌套在 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>
You could even do this with CSS alone - just by applying display none to the select and button elements in all li's except for the selected one.您甚至可以单独使用 CSS 来做到这一点——只需将 display none 应用于所有 li 中的 select 和 button 元素,除了选定的元素。 This will still have these elements in the DOM so is probably not my first thought as to how to do it.这仍然会在 DOM 中包含这些元素,所以可能不是我第一次想到如何去做。
li:not(.selected) select,
li:not(.selected) button {
display: none;
}
For example this is a sample code how it appears :例如,这是一个示例代码,它是如何显示的:
HTML : HTML :
<div *ngIf="selected" class="alert alert-success box-msg" role="alert">
<strong>List Saved!</strong> Your changes has been saved.
</div>
TS : 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);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.