Angular 6 - ngModel 在绑定显示数据时显示 object object

Question

我有一个名为 "data" 的变量，其中包含以下数据：

{
id: 1,
date: "2018-03-13T16:18:03",
date_gmt: "2018-03-13T16:18:03",
guid: {},
modified: "2018-05-03T17:25:36",
modified_gmt: "2018-05-03T17:25:36",
slug: "hello-world",
status: "publish",
type: "post",
title: {
rendered: "Hello world!"
},

...等等

在我的 app.component.html 上，当我使用时 id 显示正常：

[ngModel]="data?.id"

当我尝试显示标题时出现问题。

当我尝试时：

[ngModel]="data?.title.rendered"

我得到：[object Object]

但是当我使用时：

value="{{data?.title.rendered}}"

显示标题。

我怎样才能得到

[ngModel]="data?.title.rendered" 显示标题而不是 [object Object] ?

Answer 1

我做了这个stackblitz,

在组件中：

export class AppComponent {

  data = {
    id: 1,
    date: "2018-03-13T16:18:03",
    date_gmt: "2018-03-13T16:18:03",
    guid: {},
    modified: "2018-05-03T17:25:36",
    modified_gmt: "2018-05-03T17:25:36",
    slug: "hello-world",
    status: "publish",
    type: "post",
    title: {
      rendered: "Hello world!"
    }
  }

  myForm:FormGroup;
  constructor(private formBuilder: FormBuilder) {
        this.myForm = this.formBuilder.group({
            "title": ['', Validators.required]
        });      
    }
}

在html中：

<form [formGroup]="myForm" >  
    <input type="text" class="form-control m-input" formControlName="title" name="title" id="title-field" placeholder="Title" [(ngModel)]="data?.title.rendered">
</form>

Angular 6 - ngModel 在绑定显示数据时显示 object object

Angular 6 - ngModel showing object object when binding showing data

typescript

angular

angular6