如何在 Angular 中使用带有键值 pipe 的插入循环

Question

My Answer class

import { Question } from './question';

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

My 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;});
    }

My 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>

I want to see all key and values for them in my test-start.component.html, but I cant use nested(inserted) loop for outputing values.

So, the question is, how to output all values for every key?

Answer 1

keyvalue pipe is for iterating through object properties, not for arrays. You have an array of Answers, so you can simply pass it to the ngFor. If you want however, you can print all the key-values of an Answer as well.

<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

That how I solve my problem

            <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>