Angular 6 - ngModel, показывающий объектный объект при привязке, показывающий данные

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 идентификатор отображается нормально, когда я использую:

[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>