代码之家  ›  专栏  ›  技术社区  ›  Piotr Deja

如何在subscribe方法中为参数赋值,然后从组件内部的任何位置检索该值?

  •  0
  • Piotr Deja  · 技术社区  · 1 年前

    如何在Service方法(getTasksByCategory)中,将结果值分配给哪个角色 在组件参数中,将该值指定给参数,然后从 组件内部的任何位置?

    这是我的代码: https://pastecode.io/s/fgnemrpx

    getTasksByCategory()中的计算是正确的,只是执行顺序问题把事情搞砸了。

    // Method execution inside Component
    
    export class MyComponent implements OnInit {
        
        moneyData!:any // This is the parameter I want to assign my value to !
        
        constructor( private myService: MyService) {}
        
        async ngOnInit() {
            await this.myService.getTasksByCategory(this.moneyData, 'money') // 'money' is the category name I want to query with)
            await console.log(this.money Data); // NOT WORKING!
        }
        
    }
    
    // My Service method which has parameter 'dataConsumer' 
    
    export class MyService {
        
    getTasksByCategory(dataConsumer:any, category:string) {
        const daysFromThisWeek = this.getDaysFromThisWeek();
        this.goalsService.goalsCollection()
        .pipe(
          map((goalsArr:any) => {
            goalsArr = goalsArr.filter((item:any) => item.category === category);
            return goalsArr;
          }),
          map((goalsArr:any) => {
            const goalsIDs = goalsArr.map((item:any) => item.id);
            return goalsIDs;
          })
        )
        .subscribe((goalsIDs:any) => {
          this.tasksService.tasksCollection()
            .pipe(
              // get category-matching-tasks
              map((tasksArr:any) => {
                let modArr = [] as any;
                goalsIDs.forEach((goalId:any) => {
                  const forModArr = tasksArr.filter((task:any) => task.goal_id === goalId);
                  modArr = modArr.concat(forModArr);
              })
              return modArr;
            }),
            map(tasksArr => {
              // get number of category-matching-tasks on each week day
              let finalTasks = [] as any;
              daysFromThisWeek.forEach((day:any) => {
                  const forFinalTasks = tasksArr.filter((task:any) => task.taskDate === day);
                  finalTasks = finalTasks.concat(forFinalTasks.length);
              })
              return finalTasks;
            })
            )
            // .subscribe(d => {
            //   res = d;
            // })
            .subscribe(async (finalTasks: Promise<any>[]) => {
              const completedTasks = await Promise.all(finalTasks);
              dataConsumer = completedTasks;
              // przypisz wartość do zmiennej wewnątrz subskrypcji
              }
            )
          }) // Subscribe
      }
      
    }
    
    0 回复  |  直到 1 年前
        1
  •  0
  •   Dmitriy Ivanko    1 年前

    希望它有助于理解这个想法:

    export class MyComponent implements OnInit {
        
        public moneyData$;
        public moneyData2$;
        
        constructor(private myService: MyService) {}
        
        public ngOnInit() {
            this.moneyData$ = this.myService.getTasksByCategory(this.moneyData, 'money').pipe(map(value) => value.Data);
            this.moneyData2$ = this.moneyData$.pipe(map(value) => value.Data + 25);
    })
    }
    
    }
    

    在模板中:

    <div>{{ moneyData$ | async }}</div>
    <div>{{ moneyData2$ | async }}</div>
    

    对于模板中的对象:

    <div>{{ moneyData$ | async | json }}</div>
    <div>{{ moneyData2$ | async | json }}</div>
    

    附言:阅读更多关于反应性思维的文章(非常有用的文章): https://gist.github.com/staltz/868e7e9bc2a7b8c1f754