Как работать со многими подписками в англоязычной форме с меньшим количеством кода и хорошими практиками

Question

У меня есть угловая форма, где у меня много опций выбора, эти опции выбора управляются подписками, но я смотрю, что для каждой подписки слишком много кода.

Может кто-нибудь посоветовать мне хорошую практику для сокращенияколичество кода?

Заранее спасибо!

Вот пример: https://github.com/jreategui07/testing-subscriptions-form

Поддельный сервер работает с: mockserver -p 8080 -m mock

    this.colorSC = this.catalogueService.getColors().subscribe(
      (response: any) => {
        console.log(response.body);
        this.colorsData = response.body;
      },
      error => 
      {
        console.warn('Error', error);
      }
    );

    this.brandSC = this.catalogueService.getSizes().subscribe(
      (response: any) => {
        console.log(response.body);
        this.brandsData = response.body;
      },
      error => 
      {
        console.warn('Error', error);
      }
    );

    this.sizeSC = this.catalogueService.getFruits().subscribe(
      (response: any) => {
        console.log(response.body);
        this.sizesData = response.body;
      },
      error => 
      {
        console.warn('Error', error);
      }
    );

    this.fruitSC = this.catalogueService.getColors().subscribe(
      (response: any) => {
        console.log(response.body);
        this.fruitsData = response.body;
      },
      error => 
      {
        console.warn('Error', error);
      }
    );

Answer 1

Вы можете просто подключить наблюдаемые к опции выбора как наблюдаемые и использовать асинхронный канал для привязки данных

Объявить наблюдаемые для параметров

colorSC$ : Observable<any>;
brandSC$ : Observable<any>;
sizeSC$  : Observable<any>;
fruitSC$ : Observable<any>;

ПРИМЕЧАНИЕ. Вместо этого используйте интерфейсиз любого я не уверен, тип данных, поэтому для этого ответа я использую любой.Вы можете определить свои интерфейсы и использовать их здесь для объявления этих наблюдаемых переменных

Теперь вы можете назначить эти наблюдаемые. Вы можете сделать это в

constructor(private fb: FormBuilder, private catalogueService: CatalogueService) { 
  this.anyForm = this.fb.group({
    color: [''],
    brand: [''],
    size: [''],
    fruit: [''],
  });

  this.colorSC$ = catalogueService.getColors();
  this.brandSC$ = catalogueService.getSizes();
  this.sizeSC$  = catalogueService.getFruits();
  this.fruitSC$ = catalogueService.getColors();
}

и в своем шаблоне использовать асинхронный канал дляполучить предметы, например: colorSC$ | async Обратите внимание, что существуют безопасные проверки кода и описания, чтобы шаблон не выдавал ошибку item?.code и item?.description

<form (ngSubmit)="onSubmit()" [formGroup]="anyForm">
  <label>Color:</label>
  <select formControlName="color">
    <option *ngFor="let item of colorSC$ | async" [value]="item?.code">{{ item?.description }}</option>
  </select>
  <br><br>

  <label>Brand:</label>
  <select formControlName="brand">
    <option *ngFor="let item of brandSC$ | async" [value]="item?.code">{{ item?.description }}</option>
  </select>
  <br><br>

  <label>Size:</label>
  <select formControlName="size">
    <option *ngFor="let item of this.sizeSC$ | async" [value]="item?.code">{{ item?.description }}</option>
  </select>
  <br><br>

  <label>Fruit:</label>
  <select formControlName="fruit">
    <option *ngFor="let item of fruitSC$ | async" [value]="item?.code">{{ item?.description }}</option>
  </select>
  <br><br>

  <button type="submit">Ok</button>
</form>

В вашем сервисе у вас нетчтобы отобразить их, поскольку вы не делаете ничего полезного, вы возвращаете то же самое

export class CatalogueService {
  requestOptions: any;
  constructor(public http: HttpClient) {
    const headers = new HttpHeaders({
      'Content-Type': 'text/plain; charset=utf-8'
    });
    this.requestOptions = {headers, observe: 'response'};
  }
  getColors() {
    return this.http.get('http://localhost:8080/getColors', this.requestOptions).pipe(map(res => res.body));
  }
  getBrands() {
    return this.http.get('http://localhost:8080/getBrands', this.requestOptions).pipe(map(res => res.body));
  }
  getSizes() {
    return this.http.get('http://localhost:8080/getSizes', this.requestOptions).pipe(map(res => res.body));
  }
  getFruits() {
    return this.http.get('http://localhost:8080/getFruits', this.requestOptions).pipe(map(res => res.body));
  }
}

Таким образом, вы можете избавиться от ngOnInit ngOnDestroy, так как они вам не понадобятся для этого варианта использования.Лучше подключить его на уровне конструктора, так как они могут работать на самом уровне конструктора

---