Question

我的情景：我有一个组件：

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

在ngoninit（）上，我根据'propertyItems'对象集合中的'propertyType'字段动态创建此模板。 PropertyType可以是Numeric / String / Boolean / List等。根据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>`;
  }
}

numeric-editable-property标签的模板：

@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);
  }
}

我面临的问题：

无法从func getTemplateOfPropType（）传递属性作为对象，声明：
返回<numeric-editable-property numericEditablePropertyItem="${property.value}" childproperty="${property}"></numeric-editable-property>，到'numeric-editable-property'标签模板，即在调用onPropValChange（）fn时，childproperty输入字段显示[object Object]而不是我在getTemplateOfPropType（）函数中收到的实际对象值。

我是编码的新手，如果有人能告诉我为什么我得到[object Object]而不是实际的对象值，那将会很棒。

Answer 1

嘿，你可以用作

在视图中使用json pipe

{{yourObject | json }}

在模型中使用json stringify

console.log(JSON.stringify(yourObject))

<强>感谢

在动态创建模板+ Angular4时获取[object Object]而不是实际的对象值

1 个答案: