如何在不触及此数组的情况下 show/hide *ngFor 数组中的元素？

Question

1.Hello.There 有很多关于如何 show/hide 元素的答案，将迭代数组的每个元素附加到我们在 true/false.[=21 上更改的属性 =]

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

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

但是如果我想要 show/hide 这个项目该怎么办，但不编辑 main array.It 这很重要，因为我在开始时检查这个数组是否相等。有创建一个与数组无关的 var 的答案，但是如何为每个元素分别创建 var 到 show/hide 每个元素？

更新：

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

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:

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

我尝试使用 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: Cannot read property '0' of undefined

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

它看起来像 idx 值还没有准备好进行第二次迭代。抱歉不能使用 plunker（正在处理）。

Answer 1

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

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

中索引相同的项

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

如何在不触及此数组的情况下 show/hide *ngFor 数组中的元素？

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

angular

ngfor