Objekt Service in mehreren Komponenten * ngFor Angular

Question

Ich habe das folgende Objekt in einem Dienst. Wie kann ich es in mehreren Komponenten verwenden? Ich möchte sie mit *ngFor anrufen, um sie zu verwenden. Oder auf jeden Fall, was ist der richtige Weg?

Daten paquetes.service.ts

import { Injectable } from '@angular/core'; 
 

 
@Injectable() 
 
export class DataPaquetesService { 
 

 
\t paquetes: Array<object>; 
 
\t 
 
\t constructor() { 
 

 
\t \t this.paquetes = [ 
 
\t \t \t { nombre: 'Nombre paquete 01', precio: '100' }, 
 
\t \t \t { nombre: 'Nombre paquete 02', precio: '200' }, 
 
\t \t \t { nombre: 'Nombre paquete 03', precio: '300' }, 
 
\t \t \t { nombre: 'Nombre paquete 04', precio: '400' }, 
 
\t \t \t { nombre: 'Nombre paquete 05', precio: '500' }, 
 
\t \t \t { nombre: 'Nombre paquete 06', precio: '600' }, 
 
\t \t \t { nombre: 'Nombre paquete 07', precio: '700' } 
 

 
\t \t ] 
 
\t } 
 

 
}

bauteil A.html

<a class="dropdown-item" href="#" *ngFor = "let paquete of paquetes">{{ paquete.nombre }}/{{ paquete.precio | currency}}</a>

bauteil b.html

<option *ngFor = "let paquete of paquetes">{{ paquete.nombre}}/{{ paquete.precio | currency}}</option>

Answer 1

import { Injectable } from '@angular/core'; 

@Injectable() 
export class DataPaquetesService { 

paquetes: Array<object>; 

constructor() { 

    this.paquetes = [ 
     { nombre: 'Nombre paquete 01', precio: '100' }, 
     { nombre: 'Nombre paquete 02', precio: '200' }, 
     { nombre: 'Nombre paquete 03', precio: '300' }, 
     { nombre: 'Nombre paquete 04', precio: '400' }, 
     { nombre: 'Nombre paquete 05', precio: '500' }, 
     { nombre: 'Nombre paquete 06', precio: '600' }, 
     { nombre: 'Nombre paquete 07', precio: '700' } 

    ] 
} 
getPaquetes() { 
    return this.paquetes; 
} 
} 

und in Ihrem componentA.ts

import {MyService} from '...'; 
    export class ComponentA { 
    paquetes= []; 

    constructor(private myService: MyService){} 
    } 
    this.paquetes = this.myService.getPaquets(); 

in Ihrem componentB.ts

import {MyService} from '...'; 
    export class ComponentB { 
    paquetes= []; 
    constructor(private myService: MyService){} 
    } 
    this.paquetes= this.myService.getPaquets();