この配列に触れることなく、* ngFor配列の要素を表示/非表示する方法は？

Question

1.Hello.Thereには、要素の表示/非表示、反復配列の各要素にtrue/falseで変更するプロパティを付ける方法がたくさんあります。

<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番目の繰り返しの準備ができていません。申し訳ありませんが、プランカを使用することはできません。

Answer 1

this.itemsArrayデータは、我々がthis.itemsArray内の各項目ごとに1つのエントリ（デフォルトfalse）を取得し、別の配列showSubItemsを作成して提供されています：

constructor() { // or somewhere else where `this.itemsArray` data is already set 
    this.showSubItems = this.itemsArray.map(i => false); 
} 

我々はngForのindex機能を使用してidx変数を宣言します。この変数で、私たちはあなたの `* ngFor`あるthis.itemsArray

<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)= "showSubItems[idx] = !showSubItems[idx]"></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] = 'showSubItems[idx]'></itemComp> 
    </div> 
</div>