Question

好的，伙计们，我是Angular的新手，但我遇到了问题，我不知道自己在做什么错。

我的父组件看起来像这样，我正在尝试将每周变量传递给我的子组件：

app.component.ts

import { Component } from "@angular/core";
import { GeolocationService } from "./geolocation.service";
import { WeatherService } from "./weather.service";
import { kmphToMs } from '../utilities/helpful';

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  latitude: number;
  longitude: number;
  cityName: string;
  currentTemp: number;
  currentHumidity: number;
  currentWindSpeed: string;
  weekly: Array<object>;
  erroMessage: string;

  constructor(
    private geolocationService: GeolocationService,
    private weatherService: WeatherService
  ) {}

  ngOnInit() {
    this.geolocationService.getCoordinates().subscribe(result => {
      console.log(result);
      this.latitude = result.coords.latitude;
      this.longitude = result.coords.longitude;
      this.weatherService
        .getTheWeather(this.latitude, this.longitude)
        .subscribe(weatherData => {
          console.log(weatherData);
          this.cityName = weatherData["timezone"];
          this.currentTemp = weatherData["currently"]["temperature"];
          this.currentWindSpeed = kmphToMs(weatherData["currently"]["windSpeed"]);
          this.currentHumidity = weatherData['currently']['humidity'] * 100;
          this.weekly = weatherData['daily']['data'];
          console.table(this.weekly);
        });
    });
  }
}

app.component.html

  <app-days
    [weekly]="weekly"
  ></app-days>

这是我的子组件的外观：

import { Component, OnInit, Input } from "@angular/core";

@Component({
  selector: "app-days",
  templateUrl: "./days.component.html",
  styleUrls: ["./days.component.css"]
})
export class DaysComponent implements OnInit {
  @Input() weekly: Array<object>;


  constructor() {
  }

  ngOnInit() {
    console.log(this.weekly); 
  }
}

我正在尝试 console.log 每周变量，但它说它是未定义的，我不知道为什么

Answer 1

您的AppComponent的模板将在您的订阅完成之前开始加载。在此之前，weekly变量将在AppComponent上未定义。

尝试在ngOnChanges中阅读。每次在组件上更改@Input属性时，就会调用此方法。因此，一旦weekly在AppComponent中初始化，ngOnChanges将被使用更新后的weekly值调用。

import { Component, OnChanges, Input } from "@angular/core";

@Component({
  selector: "app-days",
  templateUrl: "./days.component.html",
  styleUrls: ["./days.component.css"]
})
export class DaysComponent implements OnChanges {
  @Input() weekly: Array<object>;

  constructor() {
  }

  ngOnChanges() {
    console.log(this.weekly); 
  }

}

要防止出现undefined的值，可以在*ngIf的模板中放置AppComponent：

<app-days *ngIf="weekly" [weekly]="weekly" ></app-days>

Answer 2

您的GEO服务正在异步设置每周变量。因此，在调用子组件的ngOnInit方法时，父组件中的异步调用可能尚未完成。

在子模板html中添加{{weekly | json}}，以调试是否设置了数据。

Answer 3

最初在AppComponent中未定义为每周的原因，并且异步从结果geolocationService.getCoordinates（）填充了原因。

但是，在DaysComponent中，您尝试引用ngOnInit挂钩上的每周数据，但这不能保证此服务调用将完成。

以下是您可以做的一些建议：

基于每周的存在向应用程序天添加ngIf指令。或
在DaysComponent中实现OnChanges并在以下情况下继续工作每周输入更改。或
您可以通过“主题/可观察的”宣布更改，并听取组件中的更改并做出相应的反应。

将数据从服务传递到父组件，然后从父组件传递到子组件

3 个答案: