Angular 2中无需使用ngFor直接访问嵌套数组的方法

当然有啦！在Angular 2+里，完全可以不用*ngFor指令直接访问嵌套数组的元素，核心就是通过数组索引精准定位到你需要的层级——不管是两层嵌套还是更深的结构都能搞定。

我给你举几个实际场景的例子：

1. 纯嵌套数组的直接访问 #

假设你在组件类里定义了这样的纯嵌套数组：

// 组件.ts文件
export class AppComponent {
  nestedArray = [
    ['苹果', '香蕉', '橙子'],
    ['牛肉', '鸡肉', '鱼肉'],
    ['牛奶', '酸奶', '奶酪']
  ];
}

在模板里，你可以直接通过[外层索引][内层索引]的方式获取指定元素：

<!-- 组件.html文件 -->
<p>第一组的第二个元素：{{ nestedArray[0][1] }}</p>
<p>第三组的第一个元素：{{ nestedArray[2][0] }}</p>

这样页面就会分别显示「香蕉」和「牛奶」。

2. 对象嵌套数组的直接访问 #

如果你的数据是对象包含数组的嵌套结构，同样可以用索引+属性名的组合访问：

// 组件.ts文件
export class AppComponent {
  foodCategories = [
    {
      categoryName: '水果',
      items: ['苹果', '香蕉', '橙子']
    },
    {
      categoryName: '肉类',
      items: ['牛肉', '鸡肉', '鱼肉']
    }
  ];
}

模板里这么写就能拿到目标元素：

<!-- 组件.html文件 -->
<p>第一个分类的第三个食材：{{ foodCategories[0].items[2] }}</p>
<p>第二个分类的名称：{{ foodCategories[1].categoryName }}</p>

这里会显示「橙子」和「肉类」。

3. 动态索引访问 #

如果索引不是固定的，你还可以在组件里定义变量来动态控制访问位置：

// 组件.ts文件
export class AppComponent {
  nestedArray = [['苹果','香蕉'],['牛肉','鸡肉']];
  selectedGroup = 1;
  selectedItem = 0;
}

模板里直接用变量当索引：

<p>当前选中的元素：{{ nestedArray[selectedGroup][selectedItem] }}</p>

这样只要修改selectedGroup或selectedItem的值，页面显示的内容就会跟着变。

小提示 #

为了避免数组越界或者数据未加载时出现报错，你可以用Angular支持的可选链操作符?.来做安全访问：

<p>安全访问示例：{{ nestedArray[3]?.[0] }}</p>

就算nestedArray[3]不存在，页面也不会报错，只会显示空内容。

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