【Angular】2重の「*ngFor」の実現方法について

Question

前提・実現したいこと

AngularでAPIから取得したJSON形式のデータを2重の「*ngFor」を用いて一覧表示したいです。

発生している問題・エラーメッセージ

以下のエラーメッセージが出力されます。
下記HTMLのソースコードの2つ目の「*ngFor」で出力されています。

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

該当のソースコード

(略)
<table *ngFor = "let quiz of quizzes; index as quizCount">
   <tr>
     <th>No</th>
     <td>{{quizCount + 1}}</td>
   </tr>
   <tr>
     <th>問題文</th>
     <td>{{quiz.sentence}}</td>
   </tr>
   <tr *ngFor = "let answers of quiz.answers">
     <th>回答</th>
     <td>{{answers.answer}}</td>
   </tr>
</table>
(略)
          

APIから受けとったJSONデータ

quizzes:
[
    {
        "quiz_sentence_no": 1,
        "sentence": "問題文1問目",
        "answers": {
            "1": {
                "answer": "こたえ1"
            },
            "2": {
                "answer": "こたえ2"
            },
            "3": {
                "answer": "こたえ3"
            }
        }
    },
    {
        "quiz_sentence_no": 2,
        "sentence": "問題文2問目",
        "answers": {
            "1": {
                "answer": "こたえ1"
            },
            "2": {
                "answer": "こたえ2"
            },
            "3": {
                "answer": "こたえ3"
            },
            "4": {
                "answer": "こたえ4"
            }
        }
    }
]

試したこと

公式ドキュメントを参照しましたが理解ができず・・・、
2つ目のループ時には配列を指定しているつもりなのですが、どのように書いたらいいのかわかりませんでした。

Answer 1

残念ながらngForでiterableでないオブジェクト（今回の場合answers）を扱うことができません。
解決策は、APIのレスポンス（JSON）に含まれるanswersの部分を、オブジェクトから配列することです。

APIの開発者にお願いして、APIのレスポンスをサーバー側でそのように修正してもらうのが１番良いですが、
何らかの理由でそれが難しい場合は、質問者さんが次のようにクライアント（Angular）側で変換するしかないでしょう。

const QUIZZES = [
  {
    "quiz_sentence_no": 1,
    "sentence": "問題文1問目",
    "answers": {
        "1": {
            "answer": "こたえ1"
        },
        "2": {
            "answer": "こたえ2"
        },
        "3": {
            "answer": "こたえ3"
        }
    }
  },
  {
    "quiz_sentence_no": 2,
    "sentence": "問題文2問目",
    "answers": {
        "1": {
            "answer": "こたえ1"
        },
        "2": {
            "answer": "こたえ2"
        },
        "3": {
            "answer": "こたえ3"
        },
        "4": {
            "answer": "こたえ4"
        }
    }
  }
];

const quizzes = QUIZZES.map(quiz => {
  quiz.answers = Object.keys(quiz.answers).map(key => quiz.answers[key]);
  return quiz;
});

あくまでもサンプルですが、よろしければサンプルコードもご確認ください。
ご提示のHTMLはそのままで上記のようにデータ加工のみ行っています。

Comments

[how_much]

ご回答いただきありがとうございます。
API作成者に修正依頼する形を取りたいと思います。

今回の件、「2重の*ngForの実現」の話ではなく、「*ngForで使用できる型」の話であることが質問することでわかりました。

ご協力いただきありがとうございました。

Answer 2

エラーの原因は、quiz.answers（"answers": { ... }）が配列ではなくオブジェクトであることです。

以下のようにすれば、解決すると思います。

{
  "quiz_sentence_no": 1,
  "sentence": "問題文1問目",
  "answers": [
    "こたえ1",
    "こたえ2",
    "こたえ3",
    "こたえ4"
  ]
}

Comments

[miyabi-sun]

これですね。
普通は質問文の原因になるようなヘンテコなオブジェクトを返しません。
せめてオブジェクトの配列なり、文字列の配列なりを返すべきでしょう。

これはPHPの連想配列をJSON変換用の関数に投げ込んで作ったように見受けられます。
ハッシュマップ的な連想配列を横着して流用するとこんな感じになるので、
バックエンドエンジニアに「はよ直せ」と伝えるだけで解決するんじゃないかと思います。

[how_much]

ご回答いただきありがとうございます。
今回はAPI作成者に修正依頼を出す形をとらせていただきます。
ご協力いただきありがとうございました。