angular - ctx。在 Angular 中未定义

Question

我正在开发来自 OpenWeatherMap API 的天气应用程序，由于请求太多，我已经两次阻止了我的服务。我检查了我的代码很多次，但我找不到一个会导致服务器循环需求的地方，我检查了控制台，它给出了以下错误:错误类型错误:ctx.amindiDGES 未定义 .
我在 main.component.html 的几行中收到此错误:

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

这就是我的服务的样子 today.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 });

这是我的 main.component.ts

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>

所有这一切的有趣之处在于我从服务器获取数据并且我确实看到了结果，但是由于需求太多，应用程序在使用几次后被阻止，允许的数量是每分钟 60 而我的应用程序需要 800+每分钟请求数，除此之外，控制台中还有一个持续的错误:ERROR TypeError: ctx.amindiDGES is undefined
我的猜测是，应用程序可能会以某种方式尝试在通过服务器获取数据之前显示数据，它会在控制台中出错，之后它会一遍又一遍地发出多个请求，直到 API 被阻止。
我想知道您是否在数据获取方面遇到过这样的问题

Answer 1

好吧，下面的函数有一些严重的问题:

 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;
        })
      })
    }
  }

正如文件所述:

The Geolocation method watchPosition() method is used to register a handler function that will be called automatically each time the position of the device changes.

所以你的代码将订阅 daitriecoordinatebi每次位置改变时都可以观察到。因此，如果位置更改 3 次，您将获得 3 个订阅。所以你会调用 API 3 次...
你有很多选择来解决这个问题。

1. Use toPromise and then await the result

async  (success) => {
    this.amindiDGES = await 
          this.todayService.daitriecoordinatebi(this.lat, this.lon).toPromise();
// or you can use
     await lastValueFrom(this.todayService.daitriecoordinatebi(this.lat, this.lon))
// since toPromise will be deprecated
})

2. use first operator within pipe to make the subscription destroyed automatically

 this.todayService.daitriecoordinatebi(this.lat, this.lon).pipe(first()).subscribe...
 // or you can use take(1)

3. You can use a Subject and a mergeMap operator to make it more elegant

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;
        })
  }