如何在不触摸此数组的情况下显示/隐藏* ngFor数组中的元素? [英] How to show/hide element in *ngFor array, without touching this Array?

问题描述

1.您好.如何显示/隐藏元素，并在迭代数组的每个元素上附加了一个我们在true/false上更改的属性，因此有很多答案.

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>

因此，每次我们列出数组的每个元素时，它都会创建item.showSubItem属性.在这种情况下，我们的数组已更改.

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?

更新:

<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 = false初始化了数组:

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

在将其发送到html的子组件后，

after I sent it to child component, in html:

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

比我尝试用showSubItems [idx]查看项目.

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>

但是显示错误:

TypeError:无法读取未定义的属性"0"

TypeError: Cannot read property '0' of undefined

但是当我渲染所有{{showSubItems}}数组时，它显示false,false,false没问题.

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

它好像是idx值尚未准备好进行第二次迭代的接缝.抱歉，不能使用plunker(正在处理).

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

推荐答案

当this.itemsArray数据可用时，我们创建另一个数组showSubItems，该数组为this.itemsArray中的每个项目获取一个条目(默认为false):

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

我们使用ngFor的index功能并声明一个idx变量.使用此变量，我们引用this.showSubItems数组项中的该项，该项与this.itemsArray

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>

这篇关于如何在不触摸此数组的情况下显示/隐藏* ngFor数组中的元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！