-1

它是由 AWS 的 API Gateway 创建的 POST API，但它总是返回无限重复的数组，如下图所示。如何只返回一个数组？

多个请求

这是代码

角

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>
4

1 回答 1

3

那不是API。为什么我确定这一点？因为您使用的是 Angular 的 HttpClient 并且您需要围绕它的大量样板来发出多个请求。您的问题是因为您的页面多次渲染，而 Angular 的渲染管理页面布局。

真正的问题在于这一行：

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

每次呈现该行时，角度调用都会getdata()发出另一个请求。

您必须将结果列表与请求它的函数分离。从您的代码看起来像是ata一个Observable. 像下面这样的东西应该可以工作：

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

请注意async使用的管道。

来自 Angular 文档

async管道订阅ObservableorPromise并返回它发出的最新值。当发出新值时，async管道会标记要检查更改的组件。当组件被销毁时，async管道会自动取消订阅以避免潜在的内存泄漏。

当然，您必须在getdata()某个地方打电话，而且通常正确的地方在ngOnInit().

旁注：如何从 Observable 订阅中只获得一个响应

由于在这个问题中，如果您只需要从 Observable 获得一个响应，那么在这个主题上存在混淆，常见的方法是使用take运算符。

import { take } from 'rxjs/operators';

[...]

someService.getObservable(...)
           .pipe( take(1) ) // <-- take first response
           .subscribe( (r) => { ... } );
于 2020-01-15T17:32:39.510 回答