Angular中使用push方法添加数据无法正常显示的问题求助

嘿，我一眼就发现你遇到的问题啦！核心原因非常简单——组件里的数组名称和模板循环用的数组名称不匹配，导致数据虽然被push进去了，但模板找不到对应的数据源来渲染~

问题定位 #

你在组件里定义的数组是 selectedProduct，但HTML模板里的*ngFor指令遍历的却是users：

<tr *ngFor="let u of users">

这就相当于你往A篮子里放了东西，却在找B篮子里的内容，肯定看不到啦！

修正步骤 #

1. 修改模板中的数组名称
   把模板里的users改成组件里的selectedProduct，这样模板就能正确关联到你push数据的数组了。

2. 优化组件数组的初始化（可选但推荐）
   你原来的数组初始化可以更规范一些，直接在定义时初始化，不用在constructor里重复写，还可以加上类型注解让代码更清晰。

修正后的完整代码 #

HTML代码

<input type="text" #userName > 
<button (click)="addToTable(userName)">Add To Table</button> 
<table> 
  <tbody> 
    <tr *ngFor="let u of selectedProduct"> 
      <td>{{u.name}}</td> 
    </tr> 
  </tbody> 
</table>

组件代码

import { Component, OnInit } from '@angular/core'; 

@Component({ 
  selector: 'app-ng-if', 
  templateUrl: './ng-if.component.html', 
  styleUrls: ['./ng-if.component.css'] 
}) 
export class NgIfComponent implements OnInit { 
  // 这里加上类型注解，初始化数组
  selectedProduct: {name: string}[] = []; 

  constructor() {} 

  addToTable(userName: any){ 
    this.selectedProduct.push( {name: userName.value} );
    // 可以加个小优化：点击后清空输入框
    userName.value = '';
  } 

  ngOnInit() {} 
}

额外小提示 #

点击按钮后可以清空输入框（上面代码里已经加上了），这样用户体验会更好哦~

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