Question

我正在创建天气应用。我的服务调用了api，并将数据映射到全局参数。然后，我的组件访问全局参数，并通过函数将数据修改为所需的正确格式。

我遇到的问题是由于某种原因该函数正在变异原始数据。

作为一种变通办法，我可以在我的component参数中创建一个新的time属性，该函数不会修改原始数据。但是，如果我将组件属性命名为 time ，则原始服务数据会发生变异。

为什么要这样做？我错过了什么吗？

原始映射的服务数据：

dailyForecast = [
0: {time: 1547618400}
1: {time: 1547704800}
2: {time: 1547791200}
];

weather.service.ts

@Injectable({
  providedIn: 'root'
})
export class WeatherService {

  // Weather parameters
  public dailyForecast: any;

  private weatherUrl = 'http://localhost:3000/weather/data';

  constructor(private http: HttpClient) {
  }

  getWeather(location) {
    return this.http.post(this.weatherUrl, location, httpOptions)
      .pipe(
        map((data: any) => {
          this.dailyForecast = data.daily;

          return data.currently;
        })
      );
  }

}

daily.component.ts

export class DailyComponent implements OnInit {

  dailyForecast: any;

  constructor(public weather: WeatherService) {
    this.dailyForecast = this.weather.dailyForecast.data;
  }

  ngOnInit() {
    this.convertUnixTime();
  }

  convertUnixTime() {
    console.log(this.weather.dailyForecast.data[0].time + ": original before loop")

    for(let i=0; i < this.dailyForecast.length; i++) {
      this.dailyForecast[i].time = this.weather.dailyForecast.data[i].time * 1000;

    console.log(this.weather.dailyForecast.data[0].time + ": original after loop")
    console.log(this.dailyForecast[0].time + ": component")
  }

控制台日志打印输出

1547618400: original before loop
1547618400000: original after loop
1547618400000: component

如果您注意到循环之前和之后的原始编号不同，则由于某种原因该功能被应用于原始数据。

但是，如果要更改功能，以创建一个名为 timeConverted 的新属性：

for(let i=0; i < this.dailyForecast.length; i++) {
          this.dailyForecast[i].timeConverted = this.weather.dailyForecast.data[i].time * 1000;

输出正确

1547618400: original before loop
1547618400: original after loop
1547618400000: component

有什么作用？只是想了解发生了什么。

我的组件功能正在修改原始服务数据-Angular 7

0 个答案: