0
207
Views¿Cómo acceder a los datos en diferentes componentes en Angular?
Estoy tratando de crear un portal de vue de resultados de estudiantes y maestros en el que los maestros puedan iniciar sesión y ver todos los resultados de los estudiantes y agregarlos a esa lista o editar esa lista. Los estudiantes pueden iniciar sesión para buscar con sus credenciales y ver su propio resultado.
Tengo una lista de estudiantes (Array). Quiero usar esa lista en mi vue de estudiante para buscar en la lista y devolver al estudiante con las credenciales coincidentes. Quiero usar esa lista para proporcionarles a los maestros la funcionalidad CRUD para una lista completa.
No pude encontrar la forma correcta de obtener acceso a la lista de estudiantes en diferentes partes de mi proyecto.
Intenté usar @Input y Service, pero no pude hacerlo de la manera correcta y obtengo una matriz vacía en ambos métodos.
¿Cuál es la forma correcta de lograr esto? Tengo datos en el componente hermano. ¿Debo almacenar datos en el componente principal? Por favor, ayúdame a encontrar la forma correcta de hacer esto.
Este es el componente donde tengo los datos, componente de estudiantes. También puede ver el componente y la estructura del proyecto en esta foto. Actualmente estoy tratando de transferir datos entre hermanos usando el servicio y fallé. Estoy configurando los datos en el constructor usando:
this.studentTransferData.setData(this.students)
Estoy tratando de obtener datos en mi componente StudentView usando:
export class StudentViewComponent implements OnInit {
name: string = ""
rollno: number = 0
studentList = this.studentDataTransferService.getData();
@Input() students: Student[] = []
@Output() studentSearch: EventEmitter<Student> = new EventEmitter();
constructor(private studentDataTransferService: StudentDataTransferService) {
console.log(this.students)
console.log(this.studentList)
}
Consola matriz vacía.
Cómo obtener los datos en mis diferentes componentes. Lo tengo en el componente de estudiantes. Gracias.
Editar: Intenté hacerlo dentro de ngInit como se sugiere en diferentes publicaciones y no funciona como se esperaba y lo quiero en un proyecto completo (hermanos y padre a hijo) Eso no es lo que quiero en este momento.
2 answers
Answer question0
Cuando necesita compartir datos entre varios componentes, generalmente usa un servicio.
Para ser realmente reactivo, también debe usar lo que se llama proxies: esos son elementos RxJS que pueden actuar tanto como observables como observadores.
private _students = new BehaviorSubject<Student[]>([]);
public students$ = this._students.asObservable();
get students() { return this._students.value; }
loadStudents() {
this.http.get<Student[]>(...).subscribe(students => this._students.next(students));
}
Luego en otros componentes
students$ = this.service.students$;
constructor(private service: StudentsService) {}
<ng-container *ngFor="let student of students$ | async">
...
</ng-container>
EDITAR: usarlo en servicios
Sí, puedes usarlo en los servicios. Si necesita realizar una llamada HTTP en algún momento, esta es la mejor solución:
constructor(private service: StudentsService) {}
rewardStudent() {
const bestStudent = this.service.students[0];
this.http.post(...).subscribe();
}
De lo contrario, tiene acceso a students$ la misma manera que lo hace con los componentes.
0
Puede crear y almacenar la lista de estudiantes dentro de una clase de servicio para estudiantes y también crear una función pública: getStudentsList dentro de su servicio y luego llamarla desde sus diferentes vues.