Question

我正在创建一个可重用的组件，可以在其中传递任何动态json，以便他能够处理该问题

我尝试的是

mycomponent.html：

<div *ngFor="let Node of items">
{{ Node[getPath()]}}<br>
</div>

mycomponent.ts：

@Input()
path:any;

@Input()
items:any;

  getData(){
    var String="";
    var data=this.path.split('.');
    for(var i=0;i<data.length;i++){
      if(i==0){
        String+="'"+data[i]+"']";
      }else if(i+1==data.length){
        String+="['"+data[i]+"'";
      }
      else{
        String+="['"+data[i]+"']";
      }
    }
    return String;
  }

getData（）函数的输出类似于

'related'] ['name'

因为原因是在我正在使用的 mycomponent.html 中 {{Node [getData（）]}}

所以基本上我想做的是 {{Node ['related'] ['name']}}

MainComponent.html：

<my-component path="related.name" items={{items}}></my-component>

输入数组

[
   {
    "related": [
      {
        "name": "first"
      }
    ]
  },
  {
    "related": [
      {
        "name": "second"
      }
    ]
  }
]

我的预期输出是

第一第二

我想将该组件创建为可恢复使用，因此我可以在项目中的任何地方使用它，所以请提出任何建议：（

Answer 1

创建动态组件以处理输入JSON时。您可以采取两种方式

创建组件。

        mycomponent.html:
        mycomponent.ts

mycomponent @Input（） items：any;

当您将组件作为任何子组件集成时，您可以作为

<mycomponent [items]="items"></mycomponent>

或当您想作为弹出窗口调用时然后

let ngModelRef : NgbModalRef = this.ngbModalService.open(mycomponent );
    ngModelRef.componentInstance.items= items;
    return ngModelRef;

有什么方法可以在角度6

1 个答案: