Я пытаюсь отправить три набора данных из трех разных запросов API на компонент Angular. В настоящее время у меня есть служба, которая обрабатывает запросы HTTP, и я импортирую эту службу в свой компонент, чтобы получить доступ к методам службы.
В настоящее время я могу подписаться и вернуть данные для любого отдельного метода обслуживания задач, выполнив следующее:
this.tasksService.getTasks();
this.tasksSub = this.tasksService.getTaskUpdateListener()
.subscribe((allTasks: Task[]) => {
this.allTasks = allTasks;
});
console.log(allTasks) вернет желаемый результат.
Однако Мне нужно получить данные из трех различных методов в мой компонент, и я не могу. Это моя последняя попытка использовать forkJoin() для выполнения sh this:
this.tasksSub = forkJoin(
this.tasksService.getTasks(),
this.tasksService.getOpenTasks(),
this.tasksService.getClosedTasks()
).this.tasksService.getTaskUpdateListener()
.subscribe((allTasks: Task[], openTasks: Task[], closedTasks: Task[]) => {
this.allTasks = allTasks;
this.openTasks = openTasks;
this.closedTasks = closedTasks;
});
Этот блок кода выдает мне сообщение об ошибке по первому параметру forkJoin():
Вопрос: Есть идеи о том, почему это происходит и как это исправить?
Ниже приведены все мои component.ts и service.ts:
task-list.component.ts
import { Component, OnInit, OnDestroy } from "@angular/core";
import { Subscription, forkJoin } from 'rxjs';
import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag-drop';
import { Task } from "../task.model";
import { TasksService } from "../tasks.service";
import { AuthService } from 'src/app/auth/auth.service';
@Component({
selector: "app-task-list",
templateUrl: "./task-list.component.html",
styleUrls: ["./task-list.component.css"]
})
export class TaskListComponent implements OnInit, OnDestroy {
constructor(public tasksService: TasksService, private authService: AuthService) {}
allTasks: Task[] = [];
openTasks: Task[] = [];
closedTasks: Task[] = [];
employeeIsAuthenticated = false;
eId: string;
isAdmin: string;
private tasksSub: Subscription;
private authStatusSub : Subscription;
ngOnInit() {
this.eId = this.authService.getEmployeeId();
this.isAdmin = this.authService.getIsAdmin();
this.tasksService.getTasks();
this.tasksSub = this.tasksService.getTaskUpdateListener()
.subscribe((allTasks: Task[]) => {
this.allTasks = allTasks;
});
this.tasksSub = forkJoin(
this.tasksService.getTasks(),
this.tasksService.getOpenTasks(),
this.tasksService.getClosedTasks()
).this.tasksService.getTaskUpdateListener()
.subscribe((allTasks: Task[], openTasks: Task[], closedTasks: Task[]) => {
this.allTasks = allTasks;
this.openTasks = openTasks;
this.closedTasks = closedTasks;
});
// auth sub
this.employeeIsAuthenticated = this.authService.getIsAuth();
this.authStatusSub = this.authService
.getAuthStatusListener()
.subscribe( isAuthenticated => {
this.employeeIsAuthenticated = isAuthenticated;
this.eId = this.authService.getEmployeeId();
this.isAdmin = this.authService.getIsAdmin();
});
}
drop(event: CdkDragDrop<string[]>) {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
transferArrayItem(event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex);
}
}
onDelete(taskId: string) {
this.tasksService.deleteTask(taskId);
}
ngOnDestroy() {
this.tasksSub.unsubscribe();
this.authStatusSub.unsubscribe();
}
}
tasks.service.ts
import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { Subject } from "rxjs";
import { map } from "rxjs/operators";
import { Router } from "@angular/router";
import { Task } from "./task.model";
@Injectable({ providedIn: "root" })
export class TasksService {
private tasks: Task[] = [];
private tasksUpdated = new Subject<Task[]>();
// we will need to construct this to use CRUD operations and router capabilities
constructor(private http: HttpClient, private router: Router) {}
// gets all tasks
getTasks() {
this.http
.get<{ message: string; tasks: any }>("http://localhost:3000/api/tasks/alltasks")
.pipe(
map(taskData => {
return taskData.tasks.map(task => {
return {
title: task.title,
content: task.content,
id: task._id,
creator: task.creator,
done: task.done
};
});
})
)
.subscribe(transformedTasks => {
console.log(transformedTasks);
this.tasks = transformedTasks;
this.tasksUpdated.next([...this.tasks]);
});
}
// get tasks for single employee
getMyTasks(creator: string) {
this.http
.get<{ message: string; tasks: any }>("http://localhost:3000/api/tasks/mytasks/"+creator)
.pipe(
map(taskData => {
return taskData.tasks.map(task => {
return {
title: task.title,
content: task.content,
id: task._id,
creator: task.creator,
done: task.done
};
});
})
)
.subscribe(transformedTasks => {
console.log(transformedTasks);
this.tasks = transformedTasks;
this.tasksUpdated.next([...this.tasks]);
});
}
// get open tasks
getOpenTasks() {
this.http
.get<{ message: string; tasks: any }>("http://localhost:3000/api/tasks/opentasks/")
.pipe(
map(taskData => {
return taskData.tasks.map(task => {
return {
title: task.title,
content: task.content,
id: task._id,
creator: task.creator,
done: task.done
};
});
})
)
.subscribe(transformedTasks => {
console.log(transformedTasks);
this.tasks = transformedTasks;
this.tasksUpdated.next([...this.tasks]);
});
}
// get closed tasks
getClosedTasks() {
this.http
.get<{ message: string; tasks: any }>("http://localhost:3000/api/tasks/closedtasks/")
.pipe(
map(taskData => {
return taskData.tasks.map(task => {
return {
title: task.title,
content: task.content,
id: task._id,
creator: task.creator,
done: task.done
};
});
})
)
.subscribe(transformedTasks => {
console.log(transformedTasks);
this.tasks = transformedTasks;
this.tasksUpdated.next([...this.tasks]);
});
}
getTaskUpdateListener() {
return this.tasksUpdated.asObservable();
}
// get specific task with id passed in
getTask(id: string) {
return this.http.get<{
_id: string;
title: string;
content: string;
creator: string;
done: boolean;
}>(
"http://localhost:3000/api/tasks/" + id
);
}
// create a task
addTask(title: string, content: string, creator: string, done: boolean) {
const task: Task = { id: null, title: title, content: content, creator: creator, done: done};
this.http
.post<{ message: string; taskId: string }>(
"http://localhost:3000/api/tasks",
task
)
.subscribe(responseData => {
const id = responseData.taskId;
task.id = id;
this.tasks.push(task);
this.tasksUpdated.next([...this.tasks]);
// return to tasks
this.router.navigate(["/mytasks/"+creator]);
});
}
// update a task
updateTask(id: string, title: string, content: string, creator: string, done: boolean ) {
const task: Task = { id: id, title: title, content: content, creator:creator, done: done };
this.http
.put("http://localhost:3000/api/tasks/" + id, task)
.subscribe(response => {
const updatedTasks = [...this.tasks];
const oldTaskIndex = updatedTasks.findIndex(t => t.id === task.id);
updatedTasks[oldTaskIndex] = task;
this.tasks = updatedTasks;
this.tasksUpdated.next([...this.tasks]);
// return to tasks
this.router.navigate(["/mytasks/"+creator]);
});
}
// delete a task
deleteTask(taskId: string) {
this.http
.delete("http://localhost:3000/api/tasks/" + taskId)
.subscribe(() => {
const updatedTasks = this.tasks.filter(task => task.id !== taskId);
this.tasks = updatedTasks;
this.tasksUpdated.next([...this.tasks]);
});
}
}