(angular)如何构建一个活的显示组件,后台传回任意类型的list对象

Question

目前单层对象也可以通过下列方式解决

class  Person{
    constructor(private name: string, private age: number,private describe: string){}
}


function main(): void {
   let persons = new Array<Person>();
   persons.push(new Person('aa',11,'bb'));
   persons.push(new Person('aa',11,'bb'));
   persons.push(new Person('aa',11,'bb'));
   persons.push(new Person('aa',11,'bb'));
   persons.push(new Person('aa',11,'bb'));
   persons.push(new Person('aa',11,'bb'));
   persons.push(new Person('aa',11,'bb'));

   showField(persons);
}

function showField(datas :Array<any>): void{
    for(let fi in datas[0]){
        console.log(fi + datas[0][fi]);
    }
}

main();

Answer 1

谢邀。

<div [ngClass]="containerClasses" [ngStyle]="containerStyles">
    <ng-container *ngFor="let opt of options?.children">
         <ng-container *ngIf="opt  && opt.selector && opt.options">
              <component1 *ngIf="opt.selector === 'component1'" [options]="opt.options">            
              </compnent1>
              <component2 *ngIf="opt.selector === 'component2'" [options]="opt.options">            
              </compnent2>
              ...
              <ng-container *ngFor="let subopt of opt.children">
                  <ng-container *ngIf="subopt && subopt.selector && subopt.options">
                      <component3 *ngIf="subopt.selector === 'component3'"[options]="subopt.options">            
                      </compnent3>
                      <component4 *ngIf="subopt.selector === 'component4'" [options]="subopt.options">            
                      </compnent4>
                      ....
                  </ng-container>
              </ng-container>
         </ng-container>
    </ng-container>
</div>
                

以上代码实现了一个多层动态组件的container，你需要什么组件，只要把它放到container下面就可以了。
归根到底，就是维护一个options的对象。