Почему я вижу [объект объекта] внутри моего ввода?

Question

Я не могу понять, почему вместо заполнителя внутри моего ввода я вижу [object Object];

Вот мой 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>

А вот component.ts :

newItem = {};
items = [];

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

Answer 1

[object Object] является результатом функции toString().

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

результат:

[object Object]

Вам необходимо передать значение типа string, но я настоятельно рекомендую вообще не передавать значение с ngModel.Вы должны использовать FormGroup для создания форм.

Answer 2

Вы должны определить newItem как string , поскольку оно относится к привязке целевому значению, которое исходит из вашего input элемента .

newItem: string;