Angular ngFor仅显示单条数据求助：控制台有数组视图仅展示一条

你的代码里有两个核心问题导致视图只显示一条记录，咱们一步步拆解解决：

1. 数组元素被覆盖而非追加 #

你的addtoUser方法每次都用this.users = [{...}]直接赋值，这会完全替换掉原数组，而不是把新元素添加进去。循环遍历result时，每调用一次addtoUser就会把users变成仅包含当前x的数组，最后自然只剩最后一条数据。

修正代码： #

把赋值改成追加元素，用push方法最直接：

addtoUser(Data: any) {
  // 用push把新元素追加到数组末尾
  this.users.push({ 
    mobilno : Data.mobilno, 
    sifre : Data.sifre, 
    rid: Data["@rid"] 
  });
  console.log(this.users);
}

如果偏好不可变操作，也可以用扩展运算符创建新数组：

addtoUser(Data: any) {
  this.users = [...this.users, { 
    mobilno : Data.mobilno, 
    sifre : Data.sifre, 
    rid: Data["@rid"] 
  }];
  console.log(this.users);
}

2. 视图绑定的字段名不匹配 #

你的视图里写的是{{item.mobil}}，但组件存入数组的字段是mobilno，这会导致即使数组数据正确，视图也显示不出有效内容（或显示空值）。

修正视图代码： #

把字段改成mobilno，还可以顺便加其他字段验证数据：

<ul>
  <li *ngFor="let item of users"> 
    手机号：{{item.mobilno}}，密码：{{item.sifre}}
  </li> 
</ul>

额外优化建议 #

• 给users数组定义明确的类型，避免字段名写错，还能获得IDE提示：

interface User {
  mobilno: string;
  sifre: string;
  rid: string;
}

users: User[] = [];

• 可以直接在YukIlan方法里处理数组，省去单独的addtoUser方法，代码更简洁：

YukIlan() {
  this.orient.command( 
    "select * from login", 
    (data) => {
      const body = data.json();
      const result = body.result;
      // 直接映射成目标数组并赋值，比循环push更高效
      this.users = result.map((x: any) => ({
        mobilno: x.mobilno,
        sifre: x.sifre,
        rid: x["@rid"]
      }));
    }, 
    (e) => console.log(e)
  );
}

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