Как получить конкретные данные из объекта json, передавая идентификатор в Angular 7

Question

Я хочу получить данные JSON из определенного идентификатора, как будто у меня есть 5 форм данных в моем JSON, и на моей домашней странице у меня есть 5 кнопок от формы 1 до формы 5, поэтому, если я нажимаю форму form1: идентификатор 1 должен отображаться это должно быть динамическим

    [
        {
            "formId": 1,
            "formName": "formOne",
            "components": 
            [
                {
                    "label": "Email",
                    "allowMultipleMasks": false,
                    "showWordCount": false,
                    "showCharCount": false,
                    "tableView": true,
                    "alwaysEnabled": false,
                    "type": "email",
                    "input": true,
                    "key": "emailField2",
                    "widget": {
                        "type": ""
                    }
                }
            ]
        },
    {
            "formId": 2,
            "formName": "formTwo",
            "components": 
            [
                {
                    "label": "Name",
                    "allowMultipleMasks": false,
                    "showWordCount": false,
                    "showCharCount": false,
                    "tableView": true,
                    "alwaysEnabled": false,
                    "type": "email",
                    "input": true,
                    "key": "emailField2",
                    "widget": {
                        "type": ""
                    }
                },

            ]
        },
    ]


so HTMl is Like This
    <button type="button">Form One</button>
    <button type="button">Form Two</button>
    <button type="button">Form Three</button>
    <button type="button">Form Four</button>
    <button type="button">Form Five</button>

Я ожидал соответствующую форму для соответствующей кнопки от JSON, но получил только одну форму.

Answer 1

Html is Look like this:


<div class="container mt-5">
  <h2>Basic Forms List</h2>
  <ul class="list-group">
    <label class="list-group-item bg-info text-white text-center "><h4  routerLink="login" (click)="gettingId(formList[0].formId)" name="login">Login Form</h4></label>
    <label class="list-group-item bg-info text-white text-center"><h4 routerLink="signup" (click)="gettingId(formList[1].formId)" name="signup">Signup Form</h4></label>
    <label  class="list-group-item bg-info text-white text-center"><h4 routerLink="registration" (click)="gettingId(formList[2].formId)" name="registration">Registration Form</h4></label>
    <label  class="list-group-item bg-info text-white text-center"><h4 routerLink="profile" (click)="gettingId(formList[3].formId)" name="profile">Profile</h4></label>
    <label class="list-group-item bg-info text-white text-center"><h4  routerLink="feedback" (click)="gettingId(formList[4].formId)" name="feedback">FeedBack</h4></label>
  </ul>
</div>
<div class="container" *ngIf="isFormSelected">
  <formio [form]="formJson"></formio>
</div>

и файл ts как этот:

import { Component } from '@angular/core';
import { FormsService } from './forms.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'TestDemo';
  formJson: any;
  isFormSelected: Boolean = false;
  formList;
  constructor(private formService: FormsService) { }

  ngOnInit() {
    this.formService.getForms()
      .subscribe(response => {
        this.formList = response;
        console.log(response)
      })
      ;
  }

  gettingId(formIndex){
    this.isFormSelected = true;
    this.formList.forEach(element => {
      debugger;
      if(element.formId == formIndex){
        this.formJson = {components:""};
        this.formJson.components = element.components;
        console.log("selected json",this.formJson);
      }
    });

  }

}