Cómo obtener el valor del objeto dentro de un objeto -- angular campo con typescript camp Relacionados El problema

How to get the object value inside a object


0
vote

problema

Español

Estoy tratando de hacer un objeto global para algunas partes de los datos de un servicio, ese servicio es observable. Para que otros componentes puedan usarlo.

Encontré una forma de llamada sujeto a manejar esta gestión estatal. Lo intenté, y es como la mitad de funcionamiento.

Entity.ts Archivo

  npm install -g http-server ng build --prod http-server -c-1 dist/pwa-my-site 4  

archivo de servicio

  npm install -g http-server ng build --prod http-server -c-1 dist/pwa-my-site 5  

Otro archivo TS componente

  npm install -g http-server ng build --prod http-server -c-1 dist/pwa-my-site 6  

El resultado real que obtuve es un objeto parece Ingrese la descripción de la imagen aquí

Original en ingles

I am trying to make a global object for some part of the data from one service, that service is observable. So other components can use it.

I found a way call subject to handle this state management. I tried, and it's like half way working.

entity.ts file

export class DataDe {   name:string;   age:number;   constructor(){     this.name = "";     this.age = 0;   } }  

service file

@Injectable({   providedIn: 'root' }) export class DeService {    sub= new BehaviorSubject<DataDe>(null);   dataStire: DataDe = new DataDe();    constructor(private http: HttpClient){}     getData(id:any):Observable<any>{     this.http.get(Url.getDetails+"id="+id).pipe(first()).subscribe(res=>{         this.dataStire.name = res[0]['name'];         this.dataStire.age = res[0]['age'];     }      this.returnSubject.next(Object.assign({},this.dataStire));     return this.http.get(Url.getDetails+"id="+id)     } } 

other component ts file

export class People implements OnInit{      constructor(public de:DeService){}      ngOnInIt(){         console.log(this.de.dataStire);  //         console.log(this.de.dataStire.age); //I want to get 4, but I only got 0      } } 

the actual result I got is an object looks like enter image description here

     
   
   

Lista de respuestas

0
 
vote

Para aprovechar el poder de RXJS, tendrá que suscribirse a ese tema.

  zoo3  

Observe que debe llamar a la siguiente () dentro de la suscripción para su llamada () llamada

  zoo4  

Finalmente para acceder a ella, debe suscribirse () a su asignatura:

  zoo5  

Opción 2

Me gustaría agregar que no necesariamente necesita un tema para esto:

Todo lo que necesita hacer es la tubería de las modificaciones que necesita, luego devuelva un observable.

  zoo6  

luego suscríbete a él:

  zoo7  

¡Diviértete!

 

To harness the power of RxJS you are going to need to subscribe to that subject.

export class DeService {      public returnSubject = new BehaviorSubject<DataDe>(null);     dataStire: DataDe = new DataDe();      constructor(private http: HttpClient) { }       getData(id: any) {         this.http.get("your request url").pipe(first()).subscribe((res) => {             this.dataStire.name = res[0]['name'];             this.dataStire.age = res[0]['age'];             this.returnSubject.next(Object.assign({}, this.dataStire));         });     } } 

Notice that you need to call next() inside the subscribe for your .get() call

this.returnSubject.next(Object.assign({}, this.dataStire)); 

Finally to access it you need to subscribe() to your subject:

export class People implements OnInit {      constructor(public de: DeService) { }      ngOnInIt() {          this.de.returnSubject.subscribe((event) => {             console.log(event);  //             console.log(event.age); //I want to get 4, but I only got 0          })         this.de.getData();     } } 

OPTION 2

I'd like to add that you don't necessarily need a subject for this:

All you need to do is pipe whatever modifications you need, then return an observable.

getData(id: any) {     return this.http.get("your request url").pipe(         first(),         map((res) => {             this.dataStire.name = res[0]['name'];             this.dataStire.age = res[0]['age'];         })     ); } 

Then subscribe to it:

ngOnInIt() {     this.de.getData('anId').subscribe((event) => {         console.log(event);  //         console.log(event.age); //I want to get 4, but I only got 0      }) } 

Have fun!

 
 

Relacionados problema

0  No se puede imprimir datos JSON anidados con 6  ( Cant print nested json data with angular 6 ) 
Estoy aprendiendo a codificar y simplemente me encontré con este problema con la angular 6 que parece que no puedo resolver. Fui capaz de obtener los datos de...

2  Configuración de reaccionar StyleGuidist con Siguiente.js y TypeScript  ( Setting up react styleguidist with next js and typescript ) 
Estoy tratando de configurar reaccionar StyleGuidist con Siguiente.js y TypeScript, pero sigo caminando en problemas. My actualyguide.config.js se ve así: ...

1  TypScript - Método personalizado fuera de la promesa  ( Typescript custom method off promise ) 
He declarado un método que devuelve la promesa: confirm(title: string, message: string) { var promise = new Promise((resolve, reject) => { ......

-3  Superposición con la imagen superior CSS  ( Overlap with top image css ) 
Necesito crear ion-card como se muestra a continuación. He intentado muchas maneras. Pero no hay suerte todavía. ¿Alguna pista? Note: tiene 2 imágenes. ...

2  TypeScript: Tipo '{}' no se le asigna a escribir 'Pick <T, K>', ¿cómo puedo escribir correctamente JavaScript `Pick`?  ( Typescript type is not assignable to type pickt k how do i type java ) 
Quiero escribir una función llamada pick , Sé que TypeScript ha incorporado Pick<T, K> , ahora quiero implementar la parte real del uso del código fuente, p...

0  Obtención de Error TypeError: No se puede leer la propiedad '0' de indefinido en suscríbase  ( Getting error typeerror cannot read property 0 of undefined on subscribe ) 
Estoy recibiendo el siguiente error al intentar suscribirme a un punto final. Aquí está mi código y la respuesta del punto final. Cuando consola registre la r...

0  ¿Cómo puedo incorporar tipos de secuelas en mi archivo de tipificación de proyectos?  ( How can i incorporate sequel types into my project typings file ) 
Quiero incorporar en mis typings raíces ( /index.d.ts ) Algunos tipos que pertenecen a sequel que se definen en @types/sequel/index.d.ts . Sé que no pued...

-1  Desplácese cuando el teclado esté abierto  ( Scroll when the keypad is open ) 
En mi pantalla, escribo el campo de entrada y obtenga resultados de búsqueda en consecuencia. La lista se presenta dentro de una vista de desplazamiento, pero...

0  La propiedad de la interfaz Súper de anulación de TypScript no funciona  ( Typescript override super interface property doesnt work ) 
Tengo la siguiente interfaz: interface Person { name: string; id: number; prop: number; } Quiero crear otro entrelazado que lo extienda: defau...

0  Cómo obtener el elemento DOM exacto usando Useref en reaccionar  ( How to get exact dom element using useref in react ) 
Estoy tratando de obtener el elemento DOM exacto en la lista de LISTITEM de la lista usando 'reacc.useref (null);' Pero no puede conseguirlo, estoy usando el ...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos