Переменные данные не сохраняются для привязки в HTML даже после назначения им данных в функции subscribe () - PullRequest
Новая
       19

Переменные данные не сохраняются для привязки в HTML даже после назначения им данных в функции subscribe ()

0 голосов
/ 20 февраля 2019

У меня есть код app-product.ts , написанный следующим образом: 

@Component({
   selector: 'app-product',
   template: `
    <div>
      <h2>{{products.prod_name | uppercase}} Details</h2>
      <div><span>Description: </span>{{products.prod_desc}}</div>
    </div>`
 })

export class ProductComponent {

   products:any = [];

   constructor(public rest: RestService){ this.getProducts() }

   getProducts() {
     this.products = [];
     this.rest.getProducts().subscribe((data: {}) => {
     console.log(data); // data is printing in console
      this.products = data; // tried keeping debugger here 
   });
}

В приведенном выше коде я могу печатать данные в консоли, но переменные продукты не являютсядоступно в моем шаблоне.Я также пытался держать отладчик в точке и пытался напечатать продукты, но каждый раз он показывался как неопределенный.

Ниже приведен мой угловой сервисный файл для использования REST API с использованием Http Client, как показано ниже: 

@Injectable({
  providedIn: 'root'
})

export class CarApiService {

  getProducts(): Observable<any> {
    return this.http.get(endpoint + 'products').pipe(
    map(this.extractData));
  }
}

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

Я также пытался просмотреть несколько потоков, таких как: переменные компонента внутри функции RxJS subscribe () не определены , но не смогли найти никакой помощи.Может кто-нибудь помочь мне?

Ответы [ 3 ]

0 голосов
/ 20 февраля 2019 
@Component({
   selector: 'app-product',
   template: `
   <div *ngFor='let product of products'>
      <h2>{{product.prod_name | uppercase}} Details</h2>
      <div><span>Description: </span>{{product.prod_desc}}</div>
   </div>`
 })

export class ProductComponent {

   products:{}[] = [];

   constructor(public rest: RestService){ this.getProducts() }

   getProducts() {
     this.products = [];
     this.rest.getProducts().subscribe((data: {}[]) => {
     this.products = data;
     console.log(this.products); // this should not be undifind
   });
}

в противном случае проверьте правильность написания

0 голосов
/ 21 февраля 2019

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

static forRoot(): ModuleWithProviders {
return {
  ngModule: SharedModule
};

}

0 голосов
/ 20 февраля 2019

Вы пытаетесь использовать product в шаблоне (*ngIf="product"), пока данные находятся внутри переменной products.

, и вы должны вызвать функцию getProducts(), чтобы получить значения внутри вашего массиваПеременная.

Импортировать интерфейс OnInit и вызвать функцию: 

export class ProductComponent implements OnInit {

   products:any = [];

   constructor(public rest: RestService){}

   ngOnInit() {
          this.getProducts();
   }
   getProducts() {
     this.products = [];
     this.rest.getProducts().subscribe((data: {}) => {
     console.log(data); // data is printing in console
      this.products = data; // tried keeping debugger here 
   });
}

обновить должный комментарий

если вы хотите показать массив в вашем шаблоне, вы должны выполнить итерацию по массиву:

template: `
    <div *ngFor='let product of products'>
      <h2>{{product.prod_name | uppercase}} Details</h2>
      <div><span>Description: </span>{{product.prod_desc}}</div>
    </div>`
...