How to show/hide element in *ngFor array, without touching this Array?

问题

1.Hello.There are a lot of answers how to show/hide element, attaching to each element of iterated array an property which we change on true/false.

 <button  (click)="attachmentHide = !attachmentHide"></button>
<itemComp [itemsArray]='item.children' class="col-sm-offset-1 subItemHiden" [class.subItemsShow] = 'showSubItem'></itemComp>

so every time when we list each element of array it creates item.showSubItem property. In this case our array has been changed.

But what to do if i want show/hide this items, but WITHOUT editing main array.It's important because I check this array for equal at the begining. there was answer to create a var which is not related to array, but how to create var for every element to show/hide every element separately?

update:

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

export class ItemComponent {
@Input() itemsArray: Array<Object>;

constructor () {}
}

update 2:

I've initialised array with i=false in home.ts:

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

after I sent it to child component, in html:

<div class="container">
<div class="row">
    <!--show item-->
    <itemComp [showSubItems]="showSubItemsArr" [itemsArray]='itemsParentArray'  ></itemComp>
</div>

than I try to view items with showSubItems[idx].

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

But it show error:

TypeError: Cannot read property '0' of undefined

but when I render all {{showSubItems}} array it displays false,false,false without problems.

It seams like idx value is not ready for second iteration. Sorry can't use plunker( working on it).

回答1:

When this.itemsArray data is available we create another array showSubItems that gets one entry (default false) for each item in this.itemsArray:

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

We use the index feature of ngFor and declare an idx variable. With this variable we reference the item in the this.showSubItems array item at the same index as the one from 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>

来源：https://stackoverflow.com/questions/37789601/how-to-show-hide-element-in-ngfor-array-without-touching-this-array