как создать форму варианта ответа на вопрос в формате angular 6 (данные поступают из службы)

Question

Я получаю эти данные от службы.

Я хочу создать форму варианта ответа на вопрос в соответствии с поступающими данными. В форме мне нужно создать вопрос и варианты для выбора.

ngOnInit() {
this.data.getQuestionList().subscribe(
      data => this.questions$ = data

);

из этой функции я получаю эти данные JSON

[{"question_id":"1","questions":"where do you live ?","options":[{"option_id":"1","options_name":"Village"},{"option_id":"2","options_name":"City"}]},{"question_id":"2","questions":"what is your qualification ?","options":[{"option_id":"3","options_name":"Graduate"},{"option_id":"4","options_name":"Masters"}]}]

Мне нужно создать динамическую форму на основе этих данных JSON. Предположим, я хочу создать форму, тогда я напишу эту вещь в файле TS. ngOnInit () {

 this.registerForm = this.formBuilder.group({
        firstName: ['', Validators.required],
        lastName: ['', Validators.required],
        email: ['', [Validators.required, Validators.email]],
        password: ['', [Validators.required, Validators.minLength(6)]]
    });

} Но для динамических имен, как создать. Допустим, для вопроса 1 будет 3 варианта, а для вопроса 2 будет 3 варианта. Имя поля опции должно быть в идентификаторе вопроса, например, для вопроса 1 option1 [], для вопроса 2 имя опции будет option2 []

Answer 1

Попробуйте следующий код будет работать

Вы можете сослаться: https://stackblitz.com/edit/angular-wamyab-oujepa

component.ts

let questions = [{"question_id":"1","questions":"where do you live ?","options":[{"option_id":"1","options_name":"Village"},{"option_id":"2","options_name":"City"}]},{"question_id":"2","questions":"what is your qualification ?","options":[{"option_id":"3","options_name":"Graduate"},{"option_id":"4","options_name":"Masters"}]}]

component.html

<div >
  <ng-container *ngFor="let question of questions">
      <p>{{question.questions}}</p>
      <select>
        <option></option>
        <option *ngFor="let option of question.options">{{option.options_name}}</option>
      </select>

    </ng-container>
 </div>