вложенный angular * ngFor в шаблоне использовал множественное | ключевое значение -> получить первое «значение» ключа

#angular

#angular

Вопрос:

Мой код:

 <div *ngFor="let measurement of measurementsDict | keyvalue" class="scrolling-container block-2" id="channel_bar">
    <ng-container *ngFor="let signal of measurement.value | keyvalue">
        {{signal.key}}
        <ng-container *ngFor=" let channel of signal.value | keyvalue">
            <ng-container *ngIf="(channel.key == 'true')">
                {{signal.key}}
            </ng-container>
        </ng-container>
    </ng-container>
</div>
  

Первое {{signal.key}} отличается от второго {{signal.key}} .
Из-за использования | keyvalue дважды.

Как я могу получить первое {{signal.key}} на втором месте (в коде)? Насколько я знаю, вы не можете изменить | keyvalue для итерации по объекту

Комментарии:

1. можете ли вы поделиться объектом, который вы пытаетесь повторить? т.е. signal или measurement.value

2. measurementsDict — это dict: {measurement1: {signal: {active: «true»}}} мне нужен «сигнал», если active ==»true»

3. тогда не должен ли второй signal.key быть channel.key??

4. Я не хочу отображать значение «channel.key». если «channel.key» имеет значение true, я хочу отобразить значение «signal.key», которое я получил в первую очередь при вызове «signal.key»

5. @B.Obama Это именно то, что вы делаете!

Ответ №1:

моя ошибка:

пришлось изменить на —> channel.value == true

 <div class="card-body">
                    <div *ngFor="let measurement of measurementsDict | keyvalue" class="scrolling-container block-2"
                        id="channel_bar">
                        <ng-container *ngFor="let signal of measurement.value | keyvalue">
                            <ng-container *ngFor=" let channel of signal.value | keyvalue">
                                <ng-container *ngIf="(channel.key === 'active')">

                                    <ng-container *ngIf="(channel.value == true)">
                                            {{signal.key}}
                                    </ng-container>
                                </ng-container>
                            </ng-container>
                        </ng-container>
                    </div>