Блог

Я переписал этот вопрос, чтобы лучше получить помощь в решении проблемы. Все отлично работает, когда я сохраняю код в своем файле component.ts и отображаю его на html-странице, но когда я пытаюсь переместить его в сервис, я получаю ошибки и динамическое отображение отсутствует.

component.ts

 import { PagesService } from './../services/pages.service';
import { Page } from './../admin/pages/page.model';
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { SERVER_URL } from '../../../src/environments/environment';


@Component({
  selector: 'app-partner',
  templateUrl: './partner.page.html',
  styleUrls: ['./partner.page.scss'],
})
export class PartnerPage implements OnInit {
  public pageList: Array<Page> = Array<Page>();
  fileName: string = "partner";
  page: Page;
  constructor(private pgsService: PagesService, private http: HttpClient) {}

  GetPages() {
    this.http.get(`${SERVER_URL}api/pages`)
    .subscribe(res=>this.Success(res),res=>this.Error(res));
  }
  GetPage(fileName: string) {
      this.http.get(`${SERVER_URL}api/pageName/${fileName}`)
    .subscribe(res=>this.SuccessPage(res), res=>this.Error(res));
  }
  ngOnInit() {
    this.GetPages();
    this.GetPage(this.fileName);

  }
  Error(res) {
    console.log(res);
  }
 Success(res) {
   console.log(res);
   this.pageList = res;
   console.log("this.pageList",this.pageList);
 }
 SuccessPage(res) {
   this.page = res;
   console.log("this.page",this.page);
 }

}
  

partner.html

 <ion-header>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
  </ion-header>
<ion-content padding>
  <ion-title>{{page?.title}}</ion-title>
  <div class="partner-wrap">
    <ion-text>
      <h1 class="partner-header">{{page?.heading}}</h1>
      <img src="../../assets/partnerupogo.png" alt="PartnerUp!">
        <div [innerHtml]='page?.content'></div>
    </ion-text>
  </div>
  <div>{{page?.footer}}</div>
</ion-content>
  

Мои предлагаемые pages.service.ts

 import { PagesService } from './../services/pages.service';
import { Page } from './../admin/pages/page.model';
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { SERVER_URL } from '../../../src/environments/environment';


@Component({
  selector: 'app-partner',
  templateUrl: './partner.page.html',
  styleUrls: ['./partner.page.scss'],
})
export class PartnerPage implements OnInit {

  public page: Page;
  fileName: string = "partner";
  constructor(public pgsService: PagesService, public http: HttpClient) {}

  ngOnInit() {
    this.pgsService.GetPage(this.fileName)
    .subscribe(res=>this.pgsService.SuccessPage(res),res=>this.pgsService.Error(res));
    this.page = this.pgsService.page;

  }

}
  

Я попытался скопировать функции в службу и запустить что-то через службу, но это не сработало. Функции будут выполняться и работать на консоли.войдите в систему через службу, но я не смог передать данные компоненту для отображения в html.

Я получаю СООБЩЕНИЕ об ОШИБКЕ в src/app/partner/partner.page.ts(21,6): ошибка TS2339: свойство ‘subscribe’ не существует для типа ‘void’.

Как мне преобразовать это, чтобы оно работало?

// код асинхронный // ПОЛУЧИТЬ ВСЕ СТРАНИЦЫ -> сервисы, которые вы превратили в обещание

 getPages() {
    return this.http
      .get<Page[]>(`${SERVER_URL}api/pages`)
      .pipe(
       map(pages => {
      //for each record in the results
          for (let page of pages) {
        //return an empty array if no links
            if (!page["links"]) {
              page["links"] = [];
          }
        }
        return pages;
      })
    )
  .toPromise();
}
  

// на страницах списка компонентов;

 ngOnInit() {
    this.getPages();
  }
async getPages() {
    try {
      this.listPages = await this.pagesService.getPages();
      console.log(this.listPages);
   } catch (error) {}
  

}

О! Я, НАКОНЕЦ, СДЕЛАЛ ЭТО!

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

 GetPage(fileName: string) {
    return this.http.get(`${SERVER_URL}api/pageName/${fileName}`);
  }
  

Затем мне нужно было использовать? при использовании интерполяции строк, поэтому я не получил кучу ошибок при отображении страницы. У меня также была опечатка в html.

 <ion-header>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
  </ion-header>
<ion-content padding>
  <ion-title>{{pgsService?.page?.title}}</ion-title>
  <div class="partner-wrap">
    <ion-text>
      <h1 class="partner-header">{{pgsService?.page?.heading}}</h1>
      <img src="../../assets/partnerupogo.png" alt="PartnerUp!">
        <div [innerHtml]='pgsService.page?.content'></div>
    </ion-text>
  </div>
  <div>{{pgsService?.page?.footer}}</div>
</ion-content>
  

Теперь он, наконец, работает как сервис, и без ошибок! Я открыт для ответов, которые можно считать правильным способом сделать это, на случай, если это не лучший способ.