Question

我有要创建表格的行列表。

rows = [
{
  emplName: "Sabbir",
  company: "Ericson",
  dob: "1990-02-02",
  edit: "<app-edit></app-edit>"
},
{
  emplName: "Sakib",
  company: "NewZen Ltd",
  dob: "1989-01-01",
  edit: "<app-edit></app-edit>"
}
]

表格格式如下

Name    Company   DOB          Edit
Sabbir  Ericson   1990-02-02   <app-edit></app-edit>

在“编辑”列中，我要呈现一个组件名称“ EditComponent”，其选择器已在字符串“ app-edit”中指定。如何将该字符串呈现为组件，以便可以在表格单元格中查看其模板？

这是我的EditComponent

@Component({
selector: 'app-edit',
templateUrl: './edit.component.html',
styleUrls: ['./edit.component.css']
})

export class EditComponent implements OnInit {
 constructor() { }

 ngOnInit() {
  }

 editModel(){
  alert('hello');
}

}

这是我的edit.component.html模板

<button (click)="editModel()">Edit</button>

我想在我的表格单元格中呈现此按钮。

Answer 1

似乎您想动态地加载组件。

由于您尚未上传此尝试，因此除了向您提供此链接（该链接应该可以解决您要实现的目标）之外，我无能为力。

看看here如何动态加载组件。

Answer 2

您也可以参考以下链接

Dynamically Generate Angular Components

如何从字符串渲染角度分量

2 个答案: