Angular/TypeScript：如何初始化Observable矩阵？

嘿，我来帮你搞定这个问题！先理清楚你的模板逻辑：外层*ngFor遍历的myObservableArray是一个数组，数组里的每个元素都是Observable，而每个Observable会发出一个你的数据数组（也就是MyDataType[]），这样内层的async管道才能订阅它，拿到数据后再遍历显示item.value。

下面是具体的实现步骤和代码示例：

1. 定义变量类型 #

首先在AppComponent里声明myObservableArray的类型，明确它是Observable数组，每个Observable发出的是MyDataType[]：

myObservableArray: Observable<MyDataType[]>[];

2. 初始化Observable矩阵 #

你有两种常见的初始化方式，根据你的场景选择：

方式一：从服务获取多个数据流 #

如果你的MyService已经提供了返回Observable<MyDataType[]>的方法（比如获取不同分组的数据），直接把这些Observable放进数组即可：

import { Component, OnInit } from '@angular/core';
import { MyService, MyDataType } from './app.service';
import { Observable } from 'rxjs';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  myObservableArray: Observable<MyDataType[]>[];

  constructor(private myService: MyService) {}

  ngOnInit() {
    // 假设你的服务有这些返回Observable的方法
    this.myObservableArray = [
      this.myService.getGroupOneData(),
      this.myService.getGroupTwoData(),
      this.myService.getGroupThreeData()
    ];
  }
}

方式二：手动创建模拟数据流 #

如果还没实现服务，只是想测试模板，可以用rxjs的of操作符生成模拟的Observable：

import { Component, OnInit } from '@angular/core';
import { MyService, MyDataType } from './app.service';
import { Observable, of } from 'rxjs'; // 记得导入of

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {
  myObservableArray: Observable<MyDataType[]>[];

  constructor(private myService: MyService) {}

  ngOnInit() {
    // 模拟两组数据，每组都是一个Observable发出的数组
    this.myObservableArray = [
      of([{ value: '第一组-项1' }, { value: '第一组-项2' }] as MyDataType[]),
      of([{ value: '第二组-项1' }, { value: '第二组-项2' }, { value: '第二组-项3' }] as MyDataType[])
    ];
  }
}

3. 注意事项 #

• 确保你的MyDataType接口定义了value属性，和模板里的{{item.value}}对应，比如：

  export interface MyDataType {
    value: string; // 或者你需要的类型
  }
  

• 别忘了在组件里实现OnInit接口，并在ngOnInit里初始化变量（避免在构造函数里做数据操作）。

这样你的模板就能正常工作了：外层遍历Observable数组，内层用async管道订阅每个Observable，拿到数据数组后遍历显示每个项的value。

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