javascript - ¿Por qué veo [object Object] dentro de mi input?

No puedo entender por qué en lugar de un marcador de posición dentro de mi entrada veo [object Object].

Aquí está mi html:

<div class="input-form">
  <input type="text" placeholder="Type name here..." [(ngModel)]="newItem">
  <button (click)="addItem()">Add new</button>
</div>
<ul>
  <li *ngFor="let item of items">{{ item }}
    <button (click)="deleteItem(item)" >Delete</button>
  </li>
</ul>

Y aquí está component.ts:

newItem = {};
items = [];

addItem() {
  if (this.newItem !== null) {
    this.items.push(this.newItem);
    this.newItem = {};
  }
}

Respuesta #1

[object Object] es el resultado de la función toString().

const obj = { };
console.log(obj.toString());

resultado :

[object Object]

Necesitas pasar un valor de tipo string, pero recomiendo encarecidamente no pasar ningún valor con ngModel. Deberías usar FormGroup para crear formularios.

Respuesta #2

Deberías definir newItem como string porque se refiere al valor del binding del objetivo que proviene de tu input element.

newItem: string;