Angular待办列表输入值无法添加至数组问题求助

嘿，我一眼就揪出问题所在啦！你看，模板里点击按钮时传递的是输入框的字符串值（unos.value），但组件里的dodaj方法却把参数声明成了Element类型。直接把字符串push进elementi数组后，数组里的元素其实是纯字符串，而不是带有sadrzaj属性的Element对象——这就导致*ngFor遍历的时候，{{ el.sadrzaj }}根本找不到对应的属性，所以列表自然不会显示新添加的项，但console.log(item)能正常输出字符串，因为你确实把值传进去了。

修复步骤： #

只需要修改组件里的dodaj方法，把传入的字符串包装成Element对象再push到数组里就行：

dodaj(sadrzaj: string) {
  // 将字符串包装为符合Element类型的对象
  this.elementi.push({ sadrzaj: sadrzaj });
  // 或者用ES6简写语法简化：{ sadrzaj }
  console.log(sadrzaj);
}

这样一来，新添加的元素就和数组里原有元素的结构完全一致了，*ngFor就能正确渲染出el.sadrzaj的值啦！

另外补充个小建议：如果后续需要更复杂的表单交互，也可以考虑给输入框用Angular的双向数据绑定（[(ngModel)]），不过就当前的需求来说，修改dodaj方法已经完全能解决问题。

内容的提问来源于stack exchange，提问作者Vatroslav