Как отписаться от http пост-заявки в Angular приложении? - PullRequest
Новая
       101

Как отписаться от http пост-заявки в Angular приложении?

0 голосов
/ 15 января 2020

Это POST API, созданный API Gateway из AWS, однако он всегда возвращает бесконечное повторение массивов, как вы видите на рисунке ниже. Как вернуть только один массив?

Несколько запросов

Вот код

Angular

import { Component, OnInit, ViewChild, OnChanges, OnDestroy } from '@angular/core';
import { HttpClient } from '@angular/common/http'; 
import { GetService } from '../get.service';
import { Observable, Subject } from 'rxjs';
import { IonSlides, IonSlide } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage implements OnInit   {
  protected ngUnsubscribe: Subject<void> = new Subject<void>();


constructor(public http:HttpClient) {}
  @ViewChild(IonSlides,{'static':false}) slides: IonSlides;

  slideOpts = {
    initialSlide: 1,
    speed: 400
 };
public result:any
public res:any
data:Observable<any>;
ata:Observable<any>;

ngOnInit(){
}

  getdata(){


   this.ata=this.http.post("XXXXXXXXXXXXXXXXXXXXXXXXX",{"freq":1});
   this.ata.subscribe(data=>{console.log(data)})

  return   this.res




}
INDEX:any

slideChanged() {

  this.INDEX =this.slides.getActiveIndex().then(data=>console.log(data))
  return this.INDEX

}
   }

HTML

   <ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-toolbar>
</ion-header>
<p *ngFor="let a of getdata()">{{a}}</p >
<ion-card>
  <ion-card-content>
  <ion-slides  [options]="slideOpts" (ionSlideWillChange)="slideChanged()">
    <ion-slide  >
        <h1></h1>
    </ion-slide>
s


  </ion-slides>
</ion-card-content>
</ion-card>

1 Ответ

3 голосов
/ 15 января 2020

Это не API. Почему я уверен в этом? Потому что вы используете Angular HttpClient, и вам нужно немало шаблонов, чтобы сделать несколько запросов. Ваша проблема в том, что ваша страница отображается несколько раз , в то время как отображаемое Angular управляет макетом страницы.

Реальная проблема заключается в этой строке: 

<p *ngFor="let a of getdata()">{{a}}</p >

Каждый раз, когда эта строка обрабатывается angular вызывает getdata() отправку другого запроса.

Вы должны отделить список результатов от запрашивающей его функции. Из вашего кода кажется, что ata является Observable. Должно работать что-то вроде следующего: 

<p *ngFor="let a of ata | async">{{a}}</p>

Обратите внимание, что используется async труба.

Из Angular документации

Канал async подписывается на Observable или Promise и возвращает последнее значение, которое он испустил. Когда создается новое значение, труба async отмечает компонент, который необходимо проверить на наличие изменений. Когда компонент уничтожается, канал async автоматически отписывается, чтобы избежать возможных утечек памяти.

Конечно, вы должны вызвать getdata() где-нибудь, и обычно правильное место находится в ngOnInit().

Примечание: Как получить только один ответ от подписки Observable

Поскольку в этом вопросе возникает путаница в этой теме c, если вам нужно получить только один ответ из Observable распространенным способом является использование оператора take. 

import { take } from 'rxjs/operators';

[...]

someService.getObservable(...)
           .pipe( take(1) ) // <-- take first response
           .subscribe( (r) => { ... } );
...