Question

我想从特定的Id获取JSON数据，就像我的JSON中有5种形式的数据，在我的主页中，我有5种从Form1到Form 5的按钮，因此，如果我单击form1，formID：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);
      }
    });

  }

}

如何从Angular 7中传递ID的JSON对象获取特定数据

1 个答案: