Iterating an array inside of an array, in iterated component in Angular-CodePudding

I have made a component that is iterated by an array. Then the data inside of that array is being pushed into each iterated component. I am able to display data from the array, but unable to display data from an array that is inside of the array.

Here is an example of the data:

[
  {
    "questionArray": [
      {
        "questionText": "How many cats do you have? ",
        "questionId": "",
        "questionControlTypeId": "",
        "questionSequence": "",
        "imageUrl": null,
        "quizId": "",
        "isEditing": false,
        "questionAnswers": [
          {
            "answer": "1",
            "correctAnswer": false,
            "questionAnswerId": "",
            "questionId": "",
            "sortOrder": ""
          },
          {
            "answer": "3",
            "correctAnswer": false,
            "questionAnswerId": null,
            "questionId": null,
            "sortOrder": null
          },
          {
            "answer": "4",
            "correctAnswer": false,
            "questionAnswerId": null,
            "questionId": null,
            "sortOrder": null
          },
          {
            "answer": "5",
            "correctAnswer": false,
            "questionAnswerId": null,
            "questionId": null,
            "sortOrder": null
          }
        ]
      }
    ],
    "id": 1
  } ]

There is more than one object of this data. Here's what I'm attempting to do with it.

<div *ngFor="let example of exampleArray$">
  <div *ngFor="let ex of example.nestedData">
    <example-component
      exampleQuestion="{{ex.questionText}}"
      exampleAnswer="{{ex.questionAnswers}}"
    ></example-component>
  </div>
</div>

Then I'm using @Input in my TS file for "example-component" to get that data and use it in the HTML.

@Input() exampleQuestion;
@Input() exampleAnswer;

I'm using {{questionText}} to display my text, and it's working just fine.

The issue is with "questionAnswers". Which itself is an array, and not only is it an array, it's also going to be used on a reactive form that has dynamic controls.

<div *ngFor="let htmlexample of questionAnswers">
  --this would be where my dynamic input field is--
<div>

However, instead of getting back multiple fields, I am getting this error:

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

I am also getting [object Object] in my console.logs.

My console.log of my observable (which is being maintained by BehaviorSubject) is logging the array appropriately.

Thank you in advance for any insight on this issue.

CodePudding user response：

I don't think you need interpolation {{ }} and you should use property binding [ ] to bind the exampleQuestion and exampleAnswer to ex.questionText and ex.questionAnswers respectively. Try

<example-component
  [exampleQuestion]="ex.questionText"
  [exampleAnswer]="ex.questionAnswers"
></example-component>

Then inside example-component:

<div *ngFor="let htmlexample of exampleAnswer">
  --this would be where my dynamic input field is--
<div>

Source: https://angular.io/guide/inputs-outputs#configuring-the-parent-component