Динамический интерфейс с использованием Angular

Question

У меня есть некоторые данные JSON, с помощью которых пользовательский интерфейс должен отображаться с Angular.Данные JSON очень динамичны.Он может иметь несколько новых полей, может быть n раз вложенным и т. Д. В принципе, он может быть очень динамичным.Есть ли способ нарисовать динамический интерфейс соответственно?

В общем, это целесообразно или лучше, если какой-нибудь внутренний уровень выполняет эту обработку данных и отправляет обработанные данные в Angular?

UPDATE 1

Спасибо всем за предложения.Но я думаю, что вторая часть вопроса никем не решена.Позвольте мне спросить это снова.В любом случае Angular должен будет динамически рисовать пользовательский интерфейс.Но перед этим нам нужно обработать данные JSON.Итак, мой вопрос здесь: кто будет лучшим субъектом для обработки данных?Бэкэнд-слой или угловой?Так что, в принципе, я сомневаюсь, что следует вводить в Angular?Данные JSON как есть или обработанные данные?Какой подход лучше?

Answer 1

Да, возможно, ваш вопрос очень широкий, но я постараюсь объяснить вам базовый подход.Вы можете создать любую модель данных, которую хотите, с полями, которых на самом деле нет, например

name?: string;

, и все, что вам нужно, - это получить худший пример, который может быть получен из серверной части.

Answer 2

Создайте FormGroup и FormArray, используя FormBuilder, а затем вы можете создать отдельный набор массивов построителя форм

, например

private _formBuilder: FormBuilder
private _fromGroup: FormGroup

this._formBuilder.group({
InputText:this._formBuilder.array([]),
CheckBox:this._formBuilder.array([])
})

ngOnInIt(){
//create a object for your Observable API service and then get the desired JSON from your API 

   this.apiservice.authHttpPost("url",param).subscribe(res=>{
     return this._fb.group({
    textVals:res.textbox //assign your JSON API result
     });
    })   
    }

HTML

 <ul>
    <li *ngFor="let inptxt of _fromGroup.controls.InputText.controls;let i=index">
      <div[formGroupName]="i">
     <label>{{inptxt.name}}  </label>                                                                                            
     <input formControlName="textVals" type="text"/>
    </div>
    </li>
    </ul>

это просто идея для вас достичь этого, я не знаю, каков будет ваш JSON-результат, Happy Coding

Answer 3

Да, это возможно.

Для каждого узла данных вам нужно придумать директиву (компонент) и вставить ее соответствующим образом при итерации объекта.