<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でそれを行うことができると思いますが、方法がわかりませんか？どんな助けでも大歓迎です。
li要素はdiv要素の有効な直接の子ではありません-だけulの要素が直接の親になることができますli。あなたが本当に行う必要があることは巣に繰り返しリー内のコンテンツで、持っているng-containerとの*ngIf項目が選択されている場合は、条件付きでコンテンツを表示するようにします。
アイテムが選択されているかどうかを判断するためにあなたのロジックに従っていることに注意してください-しかし、それを行うためのより良い方法があります。
また、スパンはインラインレベルの要素であるため、それらを正しく表示して間隔を空けるにはスタイリングが必要になります-私は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だけでこれを行うこともできます-選択されたものを除くすべてのliのselect要素とbutton要素にdisplaynoneを適用するだけです。これはまだDOMにこれらの要素を持っているので、それを行う方法についての私の最初の考えではないでしょう。
li:not(.selected) select,
li:not(.selected) button {
display: none;
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加