时间戳

首页 > 解决方案 > 如何防止孩子的数据更改影响其父母？角 5

angular - 如何防止孩子的数据更改影响其父母？角 5

问题描述

所以我有一个 Angular 应用程序，我在其中使用几个子组件为父页面“站点”构建 d3 图表。

我向父组件上的服务发出请求，它将返回一个站点对象列表，其中包含要为每个对象绘制的所有数据。我将该数据传递给 d3 图形组件。

我的问题是：当我在子组件中重组数据时，为什么它似乎覆盖了原始请求中的数据/包含这些更改（当我在父组件上使用 console.log 时）？我没有使用任何 @Output 装饰器。

我需要父母中的数据不受其子女的影响......我不确定为什么会这样！如果可以，请提供帮助，如果我能澄清任何事情，请告诉我。谢谢！

这是我的文件的样子：

sites.component.ts： 我向服务发出请求，以接收我所有站点的列表以及它们附带的随机数据。我将它们存储在“站点”中

import { Component, Inject, OnInit, Input } from '@angular/core';
import { DataService } from '../data.service';
import { Http, Response } from '@angular/http';
import { AuthService } from "../services/auth.service";

@Component({
  selector: 'app-sitelist',
  templateUrl: './sitelist.component.html',
  styleUrls: ['./sitelist.component.css']
})
export class SitelistComponent implements OnInit {
  sites;
  constructor( private _dataService: DataService, private http: Http,  public authService: AuthService ) {
  }
ngOnInit() {
    this.authService.getSites()
    .map((res:Response) => (
       res.json() 
     ))
    .subscribe(data => {
       console.log(data)
       this.sites = data
       console.log(this.sites)
    })
  }
}

sites.component.html 我遍历每个站点以将每个站点的“摘要”组件呈现为表格行，将“站点”数据传递给每个站点

<table class="responsive-table striped">
  <tbody>
    <tr *ngFor="let site of sites">
        <app-summary [site]="site"></app-summary>
    </tr>
  </tbody>
</table>

Summary.component.ts 对于每个站点，我呈现摘要组件并通过'@Input() site;' 接受一个站点的数据价值 我对其进行了重构，以便当我将其发送给子级（d3 图形组件）时，图形已经可以读取它。我将其存储在“site_info”中

import { Component, OnInit, Input, AfterViewInit } from '@angular/core';
import { DataService } from '../data.service';
import { Http } from '@angular/http';
import * as d3 from 'd3';
import { AuthService } from "../services/auth.service"; 
import { Router, ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-summary',
  templateUrl: './summary.component.html',
  styleUrls: ['./summary.component.css'],

})
export class SummaryComponent implements OnInit, AfterViewInit {
  @Input() site;

constructor(private activatedRoute: ActivatedRoute,private _dataService: DataService, private http: Http, public authService: AuthService, private router:Router ) {}
date: Date;
dates: any;
value: Number;
eachobj: any;
data: any;
average: any;
site_info: any;

ngAfterViewInit(){

}
ngOnInit() {

this.data = this.site
console.log(this.site)

this.dates = Object.keys(this.data.historical_data)
this.site_info = Object.keys(this.data.historical_data).map(key=>this.data.historical_data[key])

this.site_info = this.site_info.map((obj, i) => {
  if (!obj) {
    return {
      id: this.site.id,
      name: this.site.name,
      date: this.dates[i]};
  }
  obj.id = this.site.id,
  obj.name = this.site.name,
  obj.date = this.dates[i];
  return obj;
 });
}

summary.component.html 这是我将 site_info 数据发送给更多子组件以绘制它的地方。这些本质上是“site.component.ts”文件的孙子组件。

 <td id="td3">
   <app-precipitation [site1]="site_info"></app-precipitation>
</td>
<td id="td4">
   <app-volume [site1]="site_info"></app-volume>
</td>

标签： angulartypescript

解决方案

您可能想尝试制作sitein的副本ngOnInit：

this.data = Object.assign({}, this.site);

推荐阅读