Как использовать вставленные петли с ключевой трубкой в ​​Angular

Question

Мой класс ответа

import { Question } from './question';

export class Answer {
    AnswerId: number;
    Content: string;
    IsCorrect: boolean;
    Mark: number;
    QuestionId: number;
    Question: Question;
}

Мой TestStartComponent

    testInfo: Map<string, Answer[]>;
    id: number;
    loaded: boolean = false;

    constructor(private dataService: DataService, activeRoute: ActivatedRoute) {
        this.id = Number.parseInt(activeRoute.snapshot.params["id"]);
    }

    ngOnInit() {
        if (this.id)
            this.dataService.getTestStart(this.id)
                .subscribe((data: Map<string, Answer[]>) => {
                    this.testInfo = data; this.loaded = true;});
    }

Мой test-start.component. html

<div *ngIf="loaded">
    <table class="table table-striped">
        <thead>
            <tr>
                <td>Вопрос</td>
                <td>Вариант 1</td>
                <td>Вариант 2</td>
                <td>Вариант 3</td>
                <td>Вариант 4</td>
                <td>Вариант 5</td>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let item of testInfo | keyvalue">
                <td class="row-number-column">{{item.key}}</td>
                <td>{{item.value}}</td>
                <!--<td *ngFor="let s of testInfo[item] | keyvalue">
                    {{s.content}}
                </td>-->
                <!--<template *ngFor="let s of testInfo[item] | keyvalue">
                    <td>
                        {{s.content}}
                    </td>
                </template>-->
            </tr>
        </tbody>
    </table>
</div>

Я хочу увидеть все ключ и значения для них в моем test-start.component. html, но я не могу использовать вложенные (вставленные) l oop для вывода значений.

Итак, вопрос в том, как вывести все значения за каждый ключ?

Answer 1

Канал с ключом

предназначен для перебора свойств объекта, а не для массивов. У вас есть массив Ответов, так что вы можете просто передать его в ngFor. Однако, если вы хотите, вы можете также распечатать все ключевые значения ответа.

<tr *ngFor="let answer of testInfo">
  <td class="row-number-column">{{answer.answerId}}</td>
  <td>{{answer.content}}</td>
  <td *ngFor="let item of answer| keyvalue">
    {{item.key}} : {{item.value}} <br>
  </td>
</tr>

Answer 2

Вот как я решу свою проблему

            <tr *ngFor="let item of testInfo | keyvalue">
                <td class="row-number-column">{{item.key}}</td>
                <td *ngFor="let s of testInfo[item.key]">
                    {{s.content}}
                </td>
            </tr>