Question

我有一个点击事件，在ngIf= true时我将显示一些块。负责单击事件的按钮位于ngFor循环内，因为需要为每一行显示该按钮。当我单击此按钮时，所有行都与块一起折叠。如何编写只打开单击的行块的写操作，请帮忙。

我试图检查无效的索引

<div class="fatca-collapse">
<div class="fatca-head-row">
<span click = (allOpen)> + </span>
<span>one</span>
<span>one</span>
</div>
<div class="fatca-body-row" *ngFor ="let data of gridViewData" >
<div class="fatca-body-heading">
    <span (click)="segmentShow = !segmentShow">+</span>
    <span>{{ data.taxResCrty.codeValueDispVal }}</span>
    <span>{{ data.taxResCrty.codeValueDispVal }}</span>
</div>
<div class="fatca-body-text" *ngIf = "segmentShow">
    <span>{{data.reviewStsDt}}</span>
    <span>{{data.taxResStsUpdBy}}</span>
</div>    
</div>
</div>

Answer 1

在这种情况下，segmentShow不能是布尔值，而可以是每个数据的布尔值数组，因此您可以通过以下方式更改模板：

<div class="fatca-body-row" *ngFor ="let data of gridViewData; let index = index" >
<div class="fatca-body-heading">
    <span (click)="segmentShow[index] = !segmentShow[index]">+</span>
    <span>{{ data.taxResCrty.codeValueDispVal }}</span>
    <span>{{ data.taxResCrty.codeValueDispVal }}</span>
</div>
<div class="fatca-body-text" *ngIf = "segmentShow[index]">
    <span>{{data.reviewStsDt}}</span>
    <span>{{data.taxResStsUpdBy}}</span>
</div>

您只需在ngFor中添加索引，然后更改segmentShow以使用该索引

在组件中，segmentShow必须初始化为布尔数组：

segmentShow = [false, false, false]

项目数取决于gridViewData具有的项目数，因此，如果它具有8个元素，则segmentShow必须将相同的8个元素初始化为false。

Ngfor绑定问题

1 个答案: