有这个函数用于提取用户模块,这个函数在响应中提取用户模块的JSON.

  getUserModuleInstalled(): Observable<any[]> {
    const userId = this.user.id;
    return this._moduleService.getUserModule(userId).pipe(
      switchMap((response: any) => {
        return from(response.user_module || []).pipe(
          concatMap((userModule: any) => {
            const moduleId = userModule.module_id;
            console.log('User module Id response=> '+moduleId);
            return this._moduleService.getSubscriptionModule(moduleId).pipe(
              map(subModule =>  subModule.data.subscription_modules),
              catchError(error => {
                console.error(error);
                return of(null);
              })
            );
          }),
          toArray(),
          catchError(error => {
            console.error(error);
            return of([]);
          })
        );
      })
    );
  }

然后a使用这个函数来获取返回json 在ngOninit中使用这个json和这个subscribe方法

this.getUserModuleInstalled().subscribe((data: any[]) => {
    if (data) {
        const new_plans = JSON.parse(JSON.stringify(data));
        console.log('New plans data:', new_plans);
        new_plans.forEach((plan: ModulesSub) => {
          return this.plansSubject.next(plan);
        });
    } else {
        console.log('No data received');
    }
}, (error: any) => {
    // handle the error
    console.error('Error:', error);
});

this.plansSubject.subscribe((plan: ModulesSub) => {
    this.plans = [plan];
    console.log('Plans data:', this.plans);
});

//I make a console log for check return this object and is correct enter image description here

基于该响应,我需要如下使用subscribe,因为这是 * ngFor正确调用我的方式,示例响应应该是什么

 this.plans= [
    {
      "id": "1",
      "name": "POS Coffe Shop",
      "price": "5",
      "type": "1",
      "description": "module for sale , managed inventory, ia asistanace",
      "frequency": "month"
    }, {
      "id": "2",
      "name": "POS Coffe Shop",
      "price": "5",
      "type": "1",
      "description": "module for sale , managed inventory, ia asistanace",
      "frequency": "month"
    }
  ]

推荐答案

我们可以使用数组方法flat来平整数据并在*ngFor中显示输出

this.getUserModuleInstalled().subscribe((data: any[]) => {
    if (data) {
        const new_plans = JSON.parse(JSON.stringify(data)).flat(); // <- changed here!
        console.log('New plans data:', new_plans);
        return this.plansSubject.next(plan);
    } else {
        console.log('No data received');
    }
}, (error: any) => {
    // handle the error
    console.error('Error:', error);
});

this.plansSubject.subscribe((plan: ModulesSub) => {
    this.plans = [plan];
    console.log('Plans data:', this.plans);
});

Angular相关问答推荐

Angular 信号:编程信号量

为什么我的自定义.d.ts不起作用?LeaderLine不是构造函数

如何用ANGLE指令覆盖Html元素的数据绑定属性

为什么在回调完成之前,可观察对象会返回?

从API动态加载MAT表数据时禁用分页

一次重定向后,所有子路由都处于活动状态

无法创建新的 Ionic 项目

Nx Angular Monorepo 中 cypress 组件测试的代码覆盖率?

Moment.js 和 Angular 库

如何使用指令以Angular 传递默认值

找不到模块'@angular/compiler'

获取从(keypress)angular2按下的键

在 Angular 2 中打印 Html 模板

Angular 2 setinterval() 继续在其他组件上运行

Angular 2 - 全局 CSS 文件

在 RxJS Observable 中 flatten数组的最佳方法

找不到模块angular2/core

我应该在 Angular 4+ 应用程序中 for each 组件创建一个模块吗?

路由 getCurrentNavigation 始终返回 null

如何在 Angular CLI 6: angular.json 中添加 Sass 编译?