Question

1.Hello。有很多答案如何显示/隐藏元素，在迭代数组的每个元素上附加一个我们在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 = 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：无法读取未定义的属性“0”

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

像idx这样的接缝值没有为第二次迭代做好准备。抱歉，不能使用plunker（正在使用它）。

Answer 1

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

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

我们使用index的{{1}}功能并声明ngFor变量。使用此变量，我们引用idx数组项中的项目与this.showSubItems

中的项目相同的索引

this.itemsArray

如何在* ngFor数组中显示/隐藏元素，而不触及此数组？

1 个答案: