在Angular中是否可以实现数组绑定？附相关实现代码示例

1. 数组绑定支持说明 #

Angular完全支持数组绑定，内置的*ngFor结构型指令就是专门用于遍历数组、实现数组数据到视图的绑定渲染，你的整体实现思路是正确的。

2. 现有代码调整建议 #

你的代码逻辑通顺，但存在几处容易导致运行报错的细节，调整后即可正常运行：

• 类型与数据格式适配调整
  Firebase Realtime Database的列表接口默认返回键值对格式的对象（{键1: 数据1, 键2: 数据2}）而非纯数组，且你当前服务的返回值类型定义为Observable<object>，直接赋值后*ngFor遍历对象会抛出「不可迭代」的错误，需要调整服务代码做格式转换：

// 服务模块代码
import { map } from 'rxjs';
// 先定义明确的数据类型
interface Item {
  Item_name: string;
  // 补充你需要的其他字段
}

baseurl: string = 'https://fireman-7cc06-default-rtdb.firebaseio.com/'

getFunction(): Observable<Item[]> {
  // 先指定返回的原始数据格式是键值对对象，再用map转成数组
  return this.http.get<Record<string, Item>>(this.baseurl + 'items.json').pipe(
    map(res => Object.values(res))
  );
}

• 组件代码适配调整
  组件内提前声明listItems的类型，避免隐式any问题：

// 组件模块代码
listItems: Item[] = [];

ngOnInit(): void {
  this.itemservices.getFunction().subscribe({
    next: (data) => {
      this.listItems = data;
      console.log(this.listItems);
    },
    error: (err) => {
      console.log('error' + err);
    }
  })
}

• 视图结构优化调整
  原代码把*ngFor写在<ul>标签上，会导致每一条数据生成一个独立的无序列表，建议调整到<li>标签，同时可添加trackBy提升渲染性能：

// 组件内新增trackBy方法
trackByItemIndex(index: number, item: Item): number {
  return index;
  // 如果item有唯一id，优先用id：return item.id
}

<!-- 视图代码 -->
<div *ngIf="listItems.length">
    <ul>
        <li *ngFor="let info of listItems; trackBy: trackByItemIndex">{{info.Item_name}}</li>
    </ul>
</div>

3. 运行验证标准 #

调整后如果控制台打印的listItems是纯数组格式，页面可以正常渲染所有Item_name对应的内容，即代表实现可行。

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