Angular 在动态创建模板+；角4

我的设想： 我有一个组成部分：

@Component({
  selector: 'child-table',  
  template: `<dynamic [html]="dynamicHtml"></dynamic>`
})

@组件({
选择器：“子表”，
模板：``
})

在ngoninit（）上，我根据“propertyItems”对象集合中的“propertyType”字段动态创建此模板。 PropertyType可以是数字/字符串/布尔/列表等。根据PropertyType，我将获取模板并将其嵌入子表模板下

public ngOnInit(): void {
  this.dynamicHtml=``;
  this.dynamicHtml = '<table>';
  for (let propertyItem of this.propertyItems) {
    this.dynamicHtml+= this.getPropertyTemplate(propertyItem);
  }
  this.dynamicHtml+='</table>';
}

public getPropertyTemplate(propertyItem):string{
  let propValTemplate:string = `<tr>`;
  propValTemplate+=this.getTemplateOfPropType(propertyItem);
  propValTemplate+=`</tr>`;
  return propValTemplate;
}

private getTemplateOfPropType(property):string{
  if(property.propertyType == "Numeric")
  {
      return `<numeric-editable-property numericEditablePropertyItem="${property.value}" childproperty="${property}"></numeric-editable-property>`;
  }
  else if(property.propertyType == "String")
  {
      return `<string-editable-property stringEditablePropertyItem="${property.value}" property="${property}"></string-editable-property>`;
  }
}

public ngOnInit（）：void{
this.dynamicHtml=`；
this.dynamicHtml=''；
for（让propertyItems of this.propertyItems）{
this.dynamicHtml+=this.getPropertyTemplate（propertyItem）；
}
这个.dynamicHtml+=''；
}
公共getPropertyTemplate（propertyItem）：字符串{
让propValTemplate:string=`；
propValTemplate+=this.getTemplateOfPropType（propertyItem）；
propValTemplate+=`；
返回专有模板；
}
私有getTemplateOfPropType（属性）：字符串{
如果（property.propertyType==“Numeric”）
{
返回``；
}
else if（property.propertyType==“String”）
{
返回``；
}
}

---

数字可编辑属性标记的模板：

@Component({
  selector: 'numeric-editable-property',
  styleUrls: ['./propertyTemplateStyling.css'],
  template: `<td><input type="text" value={{numericEditablePropertyItem}} [(ngModel)]="numericEditablePropertyItem" #textarea
(change)="onPropValChange($event, textarea.value, childproperty)"></td>`     

})

export class NumericEditablePropertyTemplateComponent{ 
  @Input() numericEditablePropertyItem;
  @Input() childproperty:switchcommon.IPropertyItem;
  constructor(private deviceMgmtService: DeviceManagementService) {}

  public onPropValChange(event: Event, selectedVal: string, property: switchcommon.IPropertyItem): void {
    const message: Message.PropertyUpdateMessage = new Message.PropertyUpdateMessage();

    property.value = selectedVal;
    this.deviceMgmtService.updateProperty(property);
  }
} 

@组件({
选择器：“数值可编辑属性”，
styleUrls:['./PropertyTemplateStyleing.css']，
模板：``
})
导出类NumericEditablePropertyTemplateComponent{
@Input（）numericEditablePropertyItem；
@Input（）子属性：switchcommon.IPropertyItem；
构造函数（专用设备管理服务：设备管理服务）{}
public onPropValChange（事件：事件，selectedVal:string，属性：switchcommon.IPropertyItem）：无效{
const message:message.PropertyUpdateMessage=新建message.PropertyUpdateMessage（）；
property.value=selectedVal；
this.deviceMgmtService.updateProperty（属性）；
}
} 

---

我面临的问题：

无法从func getTemplateOfPropType（）将属性作为对象传递，语句：
返回

， 对于“数值可编辑属性”标记模板，即调用onPropValChange（）fn时，childproperty输入字段显示[object object]，而不是我在getTemplateOfPropType（）函数中接收到的实际对象值

我对编码是新手，如果有人能告诉我为什么我得到的是[object object]，而不是实际的object值，那就太棒了

嘿，你可能会被用作

在使用json管道的视图中

在使用json字符串化的模型中

---

谢谢

我正在我的updateProperty（属性）fn中执行此操作（JSON.stringify（yourObject））。我的问题是，在updateProperty（）中将“property”作为函数参数传递时，没有将其作为对象获取。基本上，“childproperty”输入字段并没有接收对象作为从语句设置的值。上述标记将属性显示为对象，但不显示在数字可编辑属性标记中。请添加错误的任何屏幕截图或返回[object object]的屏幕截图。请查找解释该行为的屏幕截图：这是因为我将模板返回为字符串吗？您解决了吗？我也有同样的问题。[object object]而不是字符串，并且值是字符串

{{yourObject | json }}

console.log(JSON.stringify(yourObject))