1.Hello.Thereには、要素の表示/非表示、反復配列の各要素にtrue/falseで変更するプロパティを付ける方法がたくさんあります。この配列に触れることなく、* ngFor配列の要素を表示/非表示する方法は?
<button (click)="attachmentHide = !attachmentHide"></button>
<itemComp [itemsArray]='item.children' class="col-sm-offset-1 subItemHiden" [class.subItemsShow] = 'showSubItem'></itemComp>
したがって、配列の各要素をリストするたびに、item.showSubItemプロパティが作成されます。この場合、配列が変更されました。
しかし、この項目を表示/非表示にするにはどうすればよいですか。メイン配列を編集することなく、この配列をチェックします。 配列には関係ないvarを作成する答えがありましたが、すべての要素を個別に表示/非表示するvarを作成する方法はありますか?
更新:
<div class="row col-sm-offset-1" *ngFor="let item of itemsArray">
<div class="col-sm-4">
<div class="row assignedItem">
<span class="glyphicon glyphicon-plus-sign " title="sub items" (click)= "showSubItem = !showSubItem"></span>
<div class=" itemName" title="State:{{item.state}},Type: {{item.type}}">{{item.name}}</div>
<!--users component-->
<!--show subItems-->
<itemComp [itemsArray]='item.children' class="col-sm-offset-1 subItemHiden" [class.subItemsShow] = 'showSubItem'></itemComp>
</div>
</div>
TSファイル:
export class ItemComponent {
@Input() itemsArray: Array<Object>;
constructor() {}
}
アップデート2:
私はhome.tsで偽Iの配列を=初期化しました:
viewNodes(result) {
setTimeout(() => {
this.myRes = result;
this.showSubItemsArr = this.myRes.content.map(i => false);
this.itemsParentArray = this.myRes.content;
console.log(this.showSubItemsArr);
this.showAssigned = true;
}, 3000);
}
HTMLで
私は子コンポーネントにそれを送った後、私は[IDX] showSubItemsでアイテムを表示しようとするよりも、
<div class="container">
<div class="row">
<!--show item-->
<itemComp [showSubItems]="showSubItemsArr" [itemsArray]='itemsParentArray' ></itemComp>
</div>
。
<div class="row col-sm-offset-1" *ngFor="let item of itemsArray let idx=index">
<div class="col-sm-4">
<div class="row assignedItem">
<span class="glyphicon glyphicon-plus-sign " title="sub items" (click)= "showSubItem = !showSubItem"></span>
<span class="glyphicon glyphicon-paperclip" title="attached docs" (click)="attachmentHide = !attachmentHide"></span>
<div class=" itemName" title="State:{{item.state}},Type: {{item.type}}">{{item.name}}</div>
<!--users component-->
<usersComp [userArray]="item.assignment"></usersComp>
</div> {{showSubItems}}
<!--attachment component-->
<attachmentComp class="col-sm-offset-1" [attachmentsArray]='item.attachments' *ngIf="attachmentHide"></attachmentComp>
<!--show subItems-->
<itemComp [itemsArray]='item.children' class="col-sm-offset-1 subItemHiden" [class.subItemsShow] = 'showSubItems[idx]'></itemComp>
</div>
</div>
しかし、それはエラーを示しています。
TypeError: Cannot read property '0' of undefined
を私はすべての{{showSubItems}}
配列をレンダリングするとき、それは問題なくfalse,false,false
を表示します。
idx
のような継ぎ目は、2番目の繰り返しの準備ができていません。申し訳ありませんが、プランカを使用することはできません。
から一つとして同じインデックスで
this.showSubItems
配列項目内の項目を参照しますか? –更新しました。ありがとうございます。 – Serhiy
私は自分の答え( '(click)=" showSubItems [idx] =!showSubItems [idx] "')で示したようにクリックハンドラを更新していません。ボタンをクリックする前にエラーですか? –