Использование Reactive Forms для чтения данных из одного сервиса и создания списка

Question

Я создал сервис с каким-то продуктом с именем и кодом, который.Я хочу использовать этот список объектов и создать список.Пожалуйста, помогите мне!:) Спасибо

product.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class DateService {
  get pdcSol(): { cod: string; denumire: string }[] {
return this._pdcSol;
}

constructor() { }    

private _pdcSol = [
{cod: '065095', denumire: 'Pompa de caldura sol apa F1145-8 '},
{cod: '065096', denumire: 'Pompa de caldura sol apa F1145-10 '},
{cod: '065097', denumire: 'Pompa de caldura sol apa F1145-12 '}];
}

home.component.ts

import { DateService } from '../date.service';

export class HomeComponent implements OnInit {

constructor(private pdc: DateService) {}
}

home.component.html

<form [formGroup]="formSol">
    <select formControlName="modelPDC">
      <option *ngFor="let pdcSol of this.pdc._pdcSol.denumire" 
       [value]="pdcSol">{{ pdcSol }}</option>
    </select>
</form>

Answer 1

Создайте переменную get в компоненте и вызовите службу pdcSols

export class HomeComponent {
  get pdcSols(): { cod: string; denumire: string }[] {
      return this.pdc.pdcSol;
  }
}

И вызовите ее в шаблоне

  <option *ngFor="let pdcSol of pdcSols" [value]="pdcSol.cod">{{ pdcSol.denumire }}</option>

Answer 2

Вы можете назначить услугу общедоступному компоненту.

import { DateService } from '../date.service';

export class HomeComponent implements OnInit {
formSol: FormGroup;
dropdownArr:any;
constructor(private pdc: DateService, private formBuilder: FormBuilder) {}

ngOnInit(){
 this.dropdownArr = this.pdc.pdcSol;
 this.formSol = this.formBuilder.group({
   modelPDC: ['']
 });
 this.formSol.controls['modelPDC'].valueChanges.subscribe(value => {console.log(value);});
}

}

Шаблон:

<form [formGroup]="formSol">
    <select formControlName="modelPDC">
      <option *ngFor="let pdcSol of this.dropdownArr" 
       [value]="pdcSol.denumire">{{ pdcSol.denumire }}</option>
    </select>
</form>