Angular5中ngFor循环内绑定ngModel遇空值问题求助

嘿，我来帮你搞定这个问题！你遇到的alert内容为空的情况，大概率是ngModel的绑定逻辑或者数组初始化有问题，下面是几个关键的排查和解决步骤：

• 先确保数组里的每个元素都初始化了title属性
  组件的TS文件里，你要给遍历的数组中的每个对象都加上title字段，不然ngModel找不到绑定的属性，输入的内容根本存不进去：

  // 示例初始化代码
  export class AppComponent {
    // 每个元素都要有title属性，哪怕是空字符串
    todoItems = [{ title: '' }, { title: '' }];
  
    showAllTitles() {
      // 遍历数组获取所有title
      const allTitles = this.todoItems.map(item => item.title);
      alert(allTitles.join('\n')); // 这样就能看到所有输入的内容了
    }
  }
  

• 模板里的ngModel要正确绑定到数组元素的属性
  用*ngFor遍历的时候，一定要把输入框的[(ngModel)]绑定到当前遍历项的title，而不是一个全局变量：

  <div *ngFor="let item of todoItems">
    <input type="text" [(ngModel)]="item.title" placeholder="输入标题">
  </div>
  <button (click)="showAllTitles()">查看所有标题</button>
  

• 动态添加元素时别忘了初始化title
  如果你的数组是动态添加新项的，添加的时候必须给新对象初始化title属性，否则新的输入框绑定还是无效：

  addNewItem() {
    this.todoItems.push({ title: '' }); // 一定要初始化title！
  }
  

按照这几步调整后，你再测试alert应该就能看到输入的标题内容啦～

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