Angular ctx。在角度上没有定义

我正在使用OpenWeatherMapAPI开发一个天气应用程序，由于请求太多，我已经两次阻止了我的服务。我检查了我的代码很多次，没有找到一个地方会引起服务器的循环请求，我检查了控制台，它给出了以下错误：错误类型错误：ctx.amindiges未定义

我在main.component.html中的几行中发现了此错误：

MainComponent_Template main.component.html:8
getLocation main.component.ts:39
ngOnInit main.component.ts:27

这就是我今天的服务。Service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';

import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class TodayService {
  url = 'http://api.openweathermap.org/data/2.5/weather';
  apiKey = '***********************';

  constructor(private http: HttpClient) { }

daitriecoordinatebi(lat, lon) {
  let params = new HttpParams()
    .set('lat', lat)
    .set('lon', lon)
    .set('units', 'metric')
    .set('appid', this.apiKey)

  return this.http.get(this.url, { params });

import { Component, OnInit } from '@angular/core';
import { TodayService } from './today.service';


@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.scss']
})

export class MainComponent implements OnInit {
  lat;
  lon;
  amindiDGES;
  kvirisdgeToday;
  ikonkaToday;

  
  title = 'Day1';
  today = new Date();

  constructor(private todayService: TodayService) { }

  ngOnInit(): void {

    // lokacia
    this.getLocation();

    // zusti saati
  

    this.today = new Date();
    

  }

  getLocation() {
    if ("geolocation" in navigator) {
      navigator.geolocation.watchPosition((success) => {
        this.lat = success.coords.latitude;
        this.lon = success.coords.longitude;

        this.todayService.daitriecoordinatebi(this.lat, this.lon).subscribe(data => {
          this.amindiDGES = data;
        })
      })
    }
  }
  
}

这是我的main.component.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpParams } from '@angular/common/http';

import { Observable, throwError } from 'rxjs';
import { catchError, retry } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class TodayService {
  url = 'http://api.openweathermap.org/data/2.5/weather';
  apiKey = '***********************';

  constructor(private http: HttpClient) { }

daitriecoordinatebi(lat, lon) {
  let params = new HttpParams()
    .set('lat', lat)
    .set('lon', lon)
    .set('units', 'metric')
    .set('appid', this.apiKey)

  return this.http.get(this.url, { params });

import { Component, OnInit } from '@angular/core';
import { TodayService } from './today.service';


@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.scss']
})

export class MainComponent implements OnInit {
  lat;
  lon;
  amindiDGES;
  kvirisdgeToday;
  ikonkaToday;

  
  title = 'Day1';
  today = new Date();

  constructor(private todayService: TodayService) { }

  ngOnInit(): void {

    // lokacia
    this.getLocation();

    // zusti saati
  

    this.today = new Date();
    

  }

  getLocation() {
    if ("geolocation" in navigator) {
      navigator.geolocation.watchPosition((success) => {
        this.lat = success.coords.latitude;
        this.lon = success.coords.longitude;

        this.todayService.daitriecoordinatebi(this.lat, this.lon).subscribe(data => {
          this.amindiDGES = data;
        })
      })
    }
  }
  
}

这是我的main.component.html的一部分

<table>
  <tbody>
    <tr>
      <td><i class="fas fa-wind"></i></td>
      <td>&nbsp;&nbsp;Wind - {{amindiDGES.wind.speed}}</td>
    </tr>
    <tr>
      <td><i class="far fa-eye"></i></td>
      <td>&nbsp;&nbsp;Visibility - {{amindiDGES.visibility}}</td>
    </tr>
    <tr>
      <td><i class="fas fa-tachometer-alt"></i></td>
      <td>&nbsp;&nbsp;Preassure - {{amindiDGES.main.pressure}}</td>
    </tr>
    <tr>
      <td><i class="fas fa-tint"></i></td>
      <td>&nbsp;&nbsp;Humidity - {{amindiDGES.main.humidity}}</td>
    </tr>
  </tbody>
</table>

风-{Amindiges.风.速度}
可见性-{amindiges.Visibility}
预压-{amindiges.main.pressure}
湿度-{amindiges.main.湿度}

有趣的是，我从服务器上获取数据并看到结果，但不知何故，由于需求太多，应用程序在几次使用后被阻止，允许的数量是每分钟60次，我的应用程序每分钟需要800多个请求，除此之外，控制台中还有一个恒定的错误：错误类型错误：ctx.amindiges未定义

我的猜测是，在通过服务器获取数据之前，应用程序可能会尝试显示数据，在控制台中出现错误，之后，它会一次又一次地发出多个请求，直到API被阻止

---

我想知道您在获取数据时是否遇到过这样的问题。下面的函数有一些严重的问题：

 getLocation() {
    if ("geolocation" in navigator) {
      navigator.geolocation.watchPosition((success) => {
        this.lat = success.coords.latitude;
        this.lon = success.coords.longitude;

        this.todayService.daitriecoordinatebi(this.lat, this.lon).subscribe(data => {
          this.amindiDGES = data;
        })
      })
    }
  }

如文件所述：

Geolocation方法watchPosition（）方法用于注册处理程序函数，该函数将在设备位置每次更改时自动调用

因此，每次位置更改时，您的代码都将订阅

daitriecoordinatebi

可观察到。因此，如果位置更改3次，您将有3个订阅。因此，您将调用API 3次

您有许多选择来解决此问题

使用

toPromise

，然后等待结果

使用管道中的第一个操作符使订阅自动销毁

您可以使用

Subject

和

mergeMap

操作符使其更加优雅

---

另外，请共享调用

daitriecoordinatebi

方法的位置。由于数据以异步方式到达，您应该向表中添加一些条件呈现，如

，以处理

ctx。amindiDGES未定义

错误。我已经包括了代码，在main.component.ts中调用了DAITERecordinationEBI。我明白了，所以为了消除控制台错误，您需要使用if条件，但它隐藏了问题，而不是修复问题，对吗？或者，除非使用if条件，否则使用async获取控制台错误是正常的做法？您应该使用

async

管道的

Observable

，或者使用

*ngIf

同步。我想尝试第三种方法，它给出以下错误：“error TS2339（TS）属性'subscribe'在'OperatorFunction'类型上不存在”@从感情上说，它有一个拼写错误，现在可能仍然有。您可以在

管道的右括号后订阅。
positionChanged = new Subject();
  getLocation() {
    if ("geolocation" in navigator) {
      navigator.geolocation.watchPosition((success) => {
        this.lat = success.coords.latitude;
        this.lon = success.coords.longitude;
        this.positionChanged.next();        
      })
    }
    this.positionChanged.pipe(
       mergeMap(()=>this.todayService.daitriecoordinatebi(this.lat, this.lon)))
        .subscribe(data => {
          this.amindiDGES = data;
        })
  }