Блог

У меня есть следующий фрагмент 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>
  

Вы не можете использовать дочерние переменные в родительском узле. Вместо этого вы можете создать средство получения, в котором вы можете проверять записи, которые имеют значение mu. на основе этого значения getter вы можете отобразить запись в родительском элементе.

Единственное, что вам нужно сделать, это написать функцию и передать в нее свой список элементов. внутри этого используйте фильтр для проверки наличия требуемых данных (в вашем случае его mt.mu ). затем верните данные. На основе возвращенных данных вы можете показать элемент.

Но когда вы вызываете любую функцию из шаблона, она вызывает функцию рекурсивно.

Поэтому в качестве наилучшей практики я бы предпочел использовать каналы для выполнения той же логики. Что делает мой код намного лучше.

Я надеюсь, что это поможет вам достичь ваших целей.