Как создать ответ на основе класса модели?

Question

Я запрашиваю данные с сервера с помощью службы:

export class SearchService {
    constructor(private http: HttpClient) {}

    getSearchCatalogs(): Observable<SearchCatalogs> {
        return this.http.get<SearchCatalogs>(`${environment.apiUrl}/catalogs`);
    }
}

Он возвращает мне объект ответа:

export interface SearchCatalogs {
    controlStatus: ControlStatu[];
    state: State[];
    source: Source[];
    department: Department[];
}

Я хочу использовать этот ответ в шаблоне, если я создам модель класса на основе ответ с set / get для каждого свойства объекта?

class SearchCatalog {
    get controlStatus() {}
    set controlStatus(value: any) {}
    
    get state() {}
    set state(value: any) {}
}

Боюсь, что случай, когда свойство отсутствует, например department, когда я передаю его в шаблоне:

<app-control [data]="search.department">
<div *ngFor="search.department"></div>

Или еще один.

Как правильно это сделать в Angular?

Answer 1

вы можете сделать некоторые из них необязательными, вы не столкнетесь с какими-либо проблемами, если отдел отсутствует, измените его на отдел?:

export interface SearchCatalogs {
 controlStatus: ControlStatu[];
 state: State[];
 source: Source[];
 department?: Department[];
}

и в своем шаблоне используйте безопасный навигация

<app-control [data]="search?.department">
<div *ngFor="search?.department"></div>

Вы также можете создать АДАПТЕР, чтобы преобразовать ответ API во внутреннее представление, вы можете взглянуть на Шаблон адаптера модели :

• создать общий c интерфейс

  export interface Adapter<T> {
   adapt(itm: any): T;
  }
  

• создать адаптер внутри файла модели SearchCatalogs

  export class SearchCatalogs {
   constructor(){
    controlStatus: ControlStatu[];
    state: State[];
    source: Source[];
    department: Department[];
   }
  }
  
  ...
  @Injectable({
   providedIn: "root",
  })
  export class SearchCatalogsAdapter implements Adapter<SearchCatalogs > {
   adapt(itm: any): SearchCatalogs {
     return new SearchCatalogs(itm.controlStatus, itm.state, itm.source);
   }
  }
  

• обновите свой сервис

  constructor(private http: HttpClient, private adapter: SearchCatalogsAdapter ) {}
  
  getSearchCatalogs(): Observable<SearchCatalogs> {
    return this.http.get<SearchCatalogs>(`${environment.apiUrl}/catalogs`)
    .pipe(
     map((data) => this.adapter.adapt(data))
    );
  }