时间戳

首页 > 解决方案 > 根据Angular中子循环中的数据隐藏父项中的项目

javascript - 根据Angular中子循环中的数据隐藏父项中的项目

问题描述

我有以下 HTML 代码片段，我在其中循环通过我的 json 响应来显示数据。它是一个带有 *ngIf 的嵌套循环，如下面的 HMTL 中所示。我需要的是基于子循环中的一个项目的值，我想在父循环中隐藏/显示一个项目。

基本上我在子循环中有mtr.eu这是一个输入类型。最初它将是空的，当用户在其中输入任何值时，我想在下面显示的父项中显示该项目。实现这一目标的最佳方式是什么。

    <div class="row accordian-head" accordion-heading>
        <span class="w20">MPRN: {{header.gpr}}</span>
        <span class="w20">Meter ID: {{header.num}}</span>
        <span class="w20" *ngIf="mtr.eu">New data added</span>
    </div>
    <div class="accordian-inner-content">
        <table class="table table-borderless">
            <thead>
                <tr class="meter-reading-header">
                    <th scope="col">Last read date</th>
                    <th scope="col">Last meter read</th>
                    <th scope="col">New reading (kWh)</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let mtr of header.mtrs" class="meter-reading-content">
                    <td>{{mtr.lrd}}</td>
                    <td>{{mtr.lrv}}</td>
                    <td>
                        <input type="number" name="newReading" class="form-control new-reading-input"
                            placeholder="eg. 12345" [(ngModel)]="mtr.eu">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</accordion-group>

标签： javascriptangularloopsangular-ng-if

解决方案

您不能在父节点中使用子变量。相反，您可以创建一个 getter，您可以在其中检查具有 mu 值的记录。根据该 getter 值，您可以在父元素上显示记录。

您唯一需要做的就是编写一个函数并将您的项目列表传递给它。在里面使用过滤器来检查所需的数据（在你的情况下是 mt.mu）。然后返回数据。根据返回的数据，您可以显示元素。

但是当您从模板调用任何函数时，它会递归调用该函数。

因此，作为最佳实践，我更喜欢使用管道来执行相同的逻辑。这使我的代码变得更好。

我希望这可以帮助您实现您的需求。

推荐阅读