Angular2 更改检测：ngOnChanges 未触发嵌套 object

Question

我知道我不是第一个问这个问题的人，但我在前面的问题中找不到答案。 我在一个组件中有这个

<div class="col-sm-5">
    <laps
        [lapsData]="rawLapsData"
        [selectedTps]="selectedTps"
        (lapsHandler)="lapsHandler($event)">
    </laps>
</div>

<map
    [lapsData]="rawLapsData"
    class="col-sm-7">
</map>

在 controller 中，rawLapsdata rawLapsdata发生变异。

在laps中，表格格式的数据为 output 为HTML 。 每当rawLapsdata更改时，这都会更改。

我的map组件需要使用ngOnChanges作为触发器来重绘 Google Map 上的标记。 问题是当rawLapsData在父级中更改时， ngOnChanges不会触发。 我能做些什么？

import {Component, Input, OnInit, OnChanges, SimpleChange} from 'angular2/core';

@Component({
    selector: 'map',
    templateUrl: './components/edMap/edMap.html',
    styleUrls: ['./components/edMap/edMap.css']
})
export class MapCmp implements OnInit, OnChanges {
    @Input() lapsData: any;
    map: google.maps.Map;

    ngOnInit() {
        ...
    }

    ngOnChanges(changes: { [propName: string]: SimpleChange }) {
        console.log('ngOnChanges = ', changes['lapsData']);
        if (this.map) this.drawMarkers();
    }

---

更新： ngOnChanges不起作用，但看起来好像lapsData正在更新。 在ngOnInit中是一个缩放变化的事件监听器，它也调用this.drawmarkers 。 当我更改缩放时，我确实看到标记发生了变化。 所以唯一的问题是我在输入数据更改时没有收到通知。

在父母中，我有这条线。 （回想一下，变化反映在圈数中，但不在map中）。

this.rawLapsData = deletePoints(this.rawLapsData, this.selectedTps);

并注意this.rawLapsData本身就是一个指向大json object中间的指针

this.rawLapsData = this.main.data.TrainingCenterDatabase.Activities[0].Activity[0].Lap;

Answer 1

我知道我不是第一个问这个问题的人，但是我在前面的问题中找不到答案。 我有一个组件

<div class="col-sm-5">
    <laps
        [lapsData]="rawLapsData"
        [selectedTps]="selectedTps"
        (lapsHandler)="lapsHandler($event)">
    </laps>
</div>

<map
    [lapsData]="rawLapsData"
    class="col-sm-7">
</map>

在控制器中， rawLapsdata会发生突变。

在laps ，数据以表格格式作为HTML输出。 每当rawLapsdata更改时，此更改就会更改。

我的map组件需要使用ngOnChanges作为触发器来重绘Google Map上的标记。 问题在于，当父中的rawLapsData更改时，ngOnChanges不会触发。 我能做什么？

import {Component, Input, OnInit, OnChanges, SimpleChange} from 'angular2/core';

@Component({
    selector: 'map',
    templateUrl: './components/edMap/edMap.html',
    styleUrls: ['./components/edMap/edMap.css']
})
export class MapCmp implements OnInit, OnChanges {
    @Input() lapsData: any;
    map: google.maps.Map;

    ngOnInit() {
        ...
    }

    ngOnChanges(changes: { [propName: string]: SimpleChange }) {
        console.log('ngOnChanges = ', changes['lapsData']);
        if (this.map) this.drawMarkers();
    }

更新： ngOnChanges无法正常工作，但好像lapsData正在更新。 在ngInit中是用于缩放更改的事件侦听器，该事件侦听器也称为this.drawmarkers 。 当我更改缩放比例时，的确确实看到了标记的变化。 因此，唯一的问题是在输入数据更改时我没有收到通知。

在父母那里，我有这条线。 （请记住，更改反映在圈中，而不反映在地图中）。

this.rawLapsData = deletePoints(this.rawLapsData, this.selectedTps);

请注意， this.rawLapsData本身是指向大型json对象中间的指针

this.rawLapsData = this.main.data.TrainingCenterDatabase.Activities[0].Activity[0].Lap;

Answer 2

我知道我不是第一个问这个问题的人，但是我在前面的问题中找不到答案。 我有一个组件

<div class="col-sm-5">
    <laps
        [lapsData]="rawLapsData"
        [selectedTps]="selectedTps"
        (lapsHandler)="lapsHandler($event)">
    </laps>
</div>

<map
    [lapsData]="rawLapsData"
    class="col-sm-7">
</map>

在控制器中， rawLapsdata会发生突变。

在laps ，数据以表格格式作为HTML输出。 每当rawLapsdata更改时，此更改就会更改。

我的map组件需要使用ngOnChanges作为触发器来重绘Google Map上的标记。 问题在于，当父中的rawLapsData更改时，ngOnChanges不会触发。 我能做什么？

import {Component, Input, OnInit, OnChanges, SimpleChange} from 'angular2/core';

@Component({
    selector: 'map',
    templateUrl: './components/edMap/edMap.html',
    styleUrls: ['./components/edMap/edMap.css']
})
export class MapCmp implements OnInit, OnChanges {
    @Input() lapsData: any;
    map: google.maps.Map;

    ngOnInit() {
        ...
    }

    ngOnChanges(changes: { [propName: string]: SimpleChange }) {
        console.log('ngOnChanges = ', changes['lapsData']);
        if (this.map) this.drawMarkers();
    }

更新： ngOnChanges无法正常工作，但好像lapsData正在更新。 在ngInit中是用于缩放更改的事件侦听器，该事件侦听器也称为this.drawmarkers 。 当我更改缩放比例时，的确确实看到了标记的变化。 因此，唯一的问题是在输入数据更改时我没有收到通知。

在父母那里，我有这条线。 （请记住，更改反映在圈中，而不反映在地图中）。

this.rawLapsData = deletePoints(this.rawLapsData, this.selectedTps);

请注意， this.rawLapsData本身是指向大型json对象中间的指针

this.rawLapsData = this.main.data.TrainingCenterDatabase.Activities[0].Activity[0].Lap;

Answer 3

我知道我不是第一个问这个问题的人，但是我在前面的问题中找不到答案。 我有一个组件

<div class="col-sm-5">
    <laps
        [lapsData]="rawLapsData"
        [selectedTps]="selectedTps"
        (lapsHandler)="lapsHandler($event)">
    </laps>
</div>

<map
    [lapsData]="rawLapsData"
    class="col-sm-7">
</map>

在控制器中， rawLapsdata会发生突变。

在laps ，数据以表格格式作为HTML输出。 每当rawLapsdata更改时，此更改就会更改。

我的map组件需要使用ngOnChanges作为触发器来重绘Google Map上的标记。 问题在于，当父中的rawLapsData更改时，ngOnChanges不会触发。 我能做什么？

import {Component, Input, OnInit, OnChanges, SimpleChange} from 'angular2/core';

@Component({
    selector: 'map',
    templateUrl: './components/edMap/edMap.html',
    styleUrls: ['./components/edMap/edMap.css']
})
export class MapCmp implements OnInit, OnChanges {
    @Input() lapsData: any;
    map: google.maps.Map;

    ngOnInit() {
        ...
    }

    ngOnChanges(changes: { [propName: string]: SimpleChange }) {
        console.log('ngOnChanges = ', changes['lapsData']);
        if (this.map) this.drawMarkers();
    }

更新： ngOnChanges无法正常工作，但好像lapsData正在更新。 在ngInit中是用于缩放更改的事件侦听器，该事件侦听器也称为this.drawmarkers 。 当我更改缩放比例时，的确确实看到了标记的变化。 因此，唯一的问题是在输入数据更改时我没有收到通知。

在父母那里，我有这条线。 （请记住，更改反映在圈中，而不反映在地图中）。

this.rawLapsData = deletePoints(this.rawLapsData, this.selectedTps);

请注意， this.rawLapsData本身是指向大型json对象中间的指针

this.rawLapsData = this.main.data.TrainingCenterDatabase.Activities[0].Activity[0].Lap;

Answer 4

我知道我不是第一个问这个问题的人，但是我在前面的问题中找不到答案。 我有一个组件

<div class="col-sm-5">
    <laps
        [lapsData]="rawLapsData"
        [selectedTps]="selectedTps"
        (lapsHandler)="lapsHandler($event)">
    </laps>
</div>

<map
    [lapsData]="rawLapsData"
    class="col-sm-7">
</map>

在控制器中， rawLapsdata会发生突变。

在laps ，数据以表格格式作为HTML输出。 每当rawLapsdata更改时，此更改就会更改。

我的map组件需要使用ngOnChanges作为触发器来重绘Google Map上的标记。 问题在于，当父中的rawLapsData更改时，ngOnChanges不会触发。 我能做什么？

import {Component, Input, OnInit, OnChanges, SimpleChange} from 'angular2/core';

@Component({
    selector: 'map',
    templateUrl: './components/edMap/edMap.html',
    styleUrls: ['./components/edMap/edMap.css']
})
export class MapCmp implements OnInit, OnChanges {
    @Input() lapsData: any;
    map: google.maps.Map;

    ngOnInit() {
        ...
    }

    ngOnChanges(changes: { [propName: string]: SimpleChange }) {
        console.log('ngOnChanges = ', changes['lapsData']);
        if (this.map) this.drawMarkers();
    }

更新： ngOnChanges无法正常工作，但好像lapsData正在更新。 在ngInit中是用于缩放更改的事件侦听器，该事件侦听器也称为this.drawmarkers 。 当我更改缩放比例时，的确确实看到了标记的变化。 因此，唯一的问题是在输入数据更改时我没有收到通知。

在父母那里，我有这条线。 （请记住，更改反映在圈中，而不反映在地图中）。

this.rawLapsData = deletePoints(this.rawLapsData, this.selectedTps);

请注意， this.rawLapsData本身是指向大型json对象中间的指针

this.rawLapsData = this.main.data.TrainingCenterDatabase.Activities[0].Activity[0].Lap;

Answer 5

我知道我不是第一个问这个问题的人，但是我在前面的问题中找不到答案。 我有一个组件

<div class="col-sm-5">
    <laps
        [lapsData]="rawLapsData"
        [selectedTps]="selectedTps"
        (lapsHandler)="lapsHandler($event)">
    </laps>
</div>

<map
    [lapsData]="rawLapsData"
    class="col-sm-7">
</map>

在控制器中， rawLapsdata会发生突变。

在laps ，数据以表格格式作为HTML输出。 每当rawLapsdata更改时，此更改就会更改。

我的map组件需要使用ngOnChanges作为触发器来重绘Google Map上的标记。 问题在于，当父中的rawLapsData更改时，ngOnChanges不会触发。 我能做什么？

import {Component, Input, OnInit, OnChanges, SimpleChange} from 'angular2/core';

@Component({
    selector: 'map',
    templateUrl: './components/edMap/edMap.html',
    styleUrls: ['./components/edMap/edMap.css']
})
export class MapCmp implements OnInit, OnChanges {
    @Input() lapsData: any;
    map: google.maps.Map;

    ngOnInit() {
        ...
    }

    ngOnChanges(changes: { [propName: string]: SimpleChange }) {
        console.log('ngOnChanges = ', changes['lapsData']);
        if (this.map) this.drawMarkers();
    }

更新： ngOnChanges无法正常工作，但好像lapsData正在更新。 在ngInit中是用于缩放更改的事件侦听器，该事件侦听器也称为this.drawmarkers 。 当我更改缩放比例时，的确确实看到了标记的变化。 因此，唯一的问题是在输入数据更改时我没有收到通知。

在父母那里，我有这条线。 （请记住，更改反映在圈中，而不反映在地图中）。

this.rawLapsData = deletePoints(this.rawLapsData, this.selectedTps);

请注意， this.rawLapsData本身是指向大型json对象中间的指针

this.rawLapsData = this.main.data.TrainingCenterDatabase.Activities[0].Activity[0].Lap;

Answer 6

我知道我不是第一个问这个问题的人，但是我在前面的问题中找不到答案。 我有一个组件

<div class="col-sm-5">
    <laps
        [lapsData]="rawLapsData"
        [selectedTps]="selectedTps"
        (lapsHandler)="lapsHandler($event)">
    </laps>
</div>

<map
    [lapsData]="rawLapsData"
    class="col-sm-7">
</map>

在控制器中， rawLapsdata会发生突变。

在laps ，数据以表格格式作为HTML输出。 每当rawLapsdata更改时，此更改就会更改。

我的map组件需要使用ngOnChanges作为触发器来重绘Google Map上的标记。 问题在于，当父中的rawLapsData更改时，ngOnChanges不会触发。 我能做什么？

import {Component, Input, OnInit, OnChanges, SimpleChange} from 'angular2/core';

@Component({
    selector: 'map',
    templateUrl: './components/edMap/edMap.html',
    styleUrls: ['./components/edMap/edMap.css']
})
export class MapCmp implements OnInit, OnChanges {
    @Input() lapsData: any;
    map: google.maps.Map;

    ngOnInit() {
        ...
    }

    ngOnChanges(changes: { [propName: string]: SimpleChange }) {
        console.log('ngOnChanges = ', changes['lapsData']);
        if (this.map) this.drawMarkers();
    }

更新： ngOnChanges无法正常工作，但好像lapsData正在更新。 在ngInit中是用于缩放更改的事件侦听器，该事件侦听器也称为this.drawmarkers 。 当我更改缩放比例时，的确确实看到了标记的变化。 因此，唯一的问题是在输入数据更改时我没有收到通知。

在父母那里，我有这条线。 （请记住，更改反映在圈中，而不反映在地图中）。

this.rawLapsData = deletePoints(this.rawLapsData, this.selectedTps);

请注意， this.rawLapsData本身是指向大型json对象中间的指针

this.rawLapsData = this.main.data.TrainingCenterDatabase.Activities[0].Activity[0].Lap;

Answer 7

我知道我不是第一个问这个问题的人，但是我在前面的问题中找不到答案。 我有一个组件

<div class="col-sm-5">
    <laps
        [lapsData]="rawLapsData"
        [selectedTps]="selectedTps"
        (lapsHandler)="lapsHandler($event)">
    </laps>
</div>

<map
    [lapsData]="rawLapsData"
    class="col-sm-7">
</map>

在控制器中， rawLapsdata会发生突变。

在laps ，数据以表格格式作为HTML输出。 每当rawLapsdata更改时，此更改就会更改。

我的map组件需要使用ngOnChanges作为触发器来重绘Google Map上的标记。 问题在于，当父中的rawLapsData更改时，ngOnChanges不会触发。 我能做什么？

import {Component, Input, OnInit, OnChanges, SimpleChange} from 'angular2/core';

@Component({
    selector: 'map',
    templateUrl: './components/edMap/edMap.html',
    styleUrls: ['./components/edMap/edMap.css']
})
export class MapCmp implements OnInit, OnChanges {
    @Input() lapsData: any;
    map: google.maps.Map;

    ngOnInit() {
        ...
    }

    ngOnChanges(changes: { [propName: string]: SimpleChange }) {
        console.log('ngOnChanges = ', changes['lapsData']);
        if (this.map) this.drawMarkers();
    }

更新： ngOnChanges无法正常工作，但好像lapsData正在更新。 在ngInit中是用于缩放更改的事件侦听器，该事件侦听器也称为this.drawmarkers 。 当我更改缩放比例时，的确确实看到了标记的变化。 因此，唯一的问题是在输入数据更改时我没有收到通知。

在父母那里，我有这条线。 （请记住，更改反映在圈中，而不反映在地图中）。

this.rawLapsData = deletePoints(this.rawLapsData, this.selectedTps);

请注意， this.rawLapsData本身是指向大型json对象中间的指针

this.rawLapsData = this.main.data.TrainingCenterDatabase.Activities[0].Activity[0].Lap;

Answer 8

我知道我不是第一个问这个问题的人，但是我在前面的问题中找不到答案。 我有一个组件

<div class="col-sm-5">
    <laps
        [lapsData]="rawLapsData"
        [selectedTps]="selectedTps"
        (lapsHandler)="lapsHandler($event)">
    </laps>
</div>

<map
    [lapsData]="rawLapsData"
    class="col-sm-7">
</map>

在控制器中， rawLapsdata会发生突变。

在laps ，数据以表格格式作为HTML输出。 每当rawLapsdata更改时，此更改就会更改。

我的map组件需要使用ngOnChanges作为触发器来重绘Google Map上的标记。 问题在于，当父中的rawLapsData更改时，ngOnChanges不会触发。 我能做什么？

import {Component, Input, OnInit, OnChanges, SimpleChange} from 'angular2/core';

@Component({
    selector: 'map',
    templateUrl: './components/edMap/edMap.html',
    styleUrls: ['./components/edMap/edMap.css']
})
export class MapCmp implements OnInit, OnChanges {
    @Input() lapsData: any;
    map: google.maps.Map;

    ngOnInit() {
        ...
    }

    ngOnChanges(changes: { [propName: string]: SimpleChange }) {
        console.log('ngOnChanges = ', changes['lapsData']);
        if (this.map) this.drawMarkers();
    }

更新： ngOnChanges无法正常工作，但好像lapsData正在更新。 在ngInit中是用于缩放更改的事件侦听器，该事件侦听器也称为this.drawmarkers 。 当我更改缩放比例时，的确确实看到了标记的变化。 因此，唯一的问题是在输入数据更改时我没有收到通知。

在父母那里，我有这条线。 （请记住，更改反映在圈中，而不反映在地图中）。

this.rawLapsData = deletePoints(this.rawLapsData, this.selectedTps);

请注意， this.rawLapsData本身是指向大型json对象中间的指针

this.rawLapsData = this.main.data.TrainingCenterDatabase.Activities[0].Activity[0].Lap;

Answer 9

我知道我不是第一个问这个问题的人，但是我在前面的问题中找不到答案。 我有一个组件

<div class="col-sm-5">
    <laps
        [lapsData]="rawLapsData"
        [selectedTps]="selectedTps"
        (lapsHandler)="lapsHandler($event)">
    </laps>
</div>

<map
    [lapsData]="rawLapsData"
    class="col-sm-7">
</map>

在控制器中， rawLapsdata会发生突变。

在laps ，数据以表格格式作为HTML输出。 每当rawLapsdata更改时，此更改就会更改。

我的map组件需要使用ngOnChanges作为触发器来重绘Google Map上的标记。 问题在于，当父中的rawLapsData更改时，ngOnChanges不会触发。 我能做什么？

import {Component, Input, OnInit, OnChanges, SimpleChange} from 'angular2/core';

@Component({
    selector: 'map',
    templateUrl: './components/edMap/edMap.html',
    styleUrls: ['./components/edMap/edMap.css']
})
export class MapCmp implements OnInit, OnChanges {
    @Input() lapsData: any;
    map: google.maps.Map;

    ngOnInit() {
        ...
    }

    ngOnChanges(changes: { [propName: string]: SimpleChange }) {
        console.log('ngOnChanges = ', changes['lapsData']);
        if (this.map) this.drawMarkers();
    }

更新： ngOnChanges无法正常工作，但好像lapsData正在更新。 在ngInit中是用于缩放更改的事件侦听器，该事件侦听器也称为this.drawmarkers 。 当我更改缩放比例时，的确确实看到了标记的变化。 因此，唯一的问题是在输入数据更改时我没有收到通知。

在父母那里，我有这条线。 （请记住，更改反映在圈中，而不反映在地图中）。

this.rawLapsData = deletePoints(this.rawLapsData, this.selectedTps);

请注意， this.rawLapsData本身是指向大型json对象中间的指针

this.rawLapsData = this.main.data.TrainingCenterDatabase.Activities[0].Activity[0].Lap;

Answer 10

我知道我不是第一个问这个问题的人，但是我在前面的问题中找不到答案。 我有一个组件

<div class="col-sm-5">
    <laps
        [lapsData]="rawLapsData"
        [selectedTps]="selectedTps"
        (lapsHandler)="lapsHandler($event)">
    </laps>
</div>

<map
    [lapsData]="rawLapsData"
    class="col-sm-7">
</map>

在控制器中， rawLapsdata会发生突变。

在laps ，数据以表格格式作为HTML输出。 每当rawLapsdata更改时，此更改就会更改。

我的map组件需要使用ngOnChanges作为触发器来重绘Google Map上的标记。 问题在于，当父中的rawLapsData更改时，ngOnChanges不会触发。 我能做什么？

import {Component, Input, OnInit, OnChanges, SimpleChange} from 'angular2/core';

@Component({
    selector: 'map',
    templateUrl: './components/edMap/edMap.html',
    styleUrls: ['./components/edMap/edMap.css']
})
export class MapCmp implements OnInit, OnChanges {
    @Input() lapsData: any;
    map: google.maps.Map;

    ngOnInit() {
        ...
    }

    ngOnChanges(changes: { [propName: string]: SimpleChange }) {
        console.log('ngOnChanges = ', changes['lapsData']);
        if (this.map) this.drawMarkers();
    }

更新： ngOnChanges无法正常工作，但好像lapsData正在更新。 在ngInit中是用于缩放更改的事件侦听器，该事件侦听器也称为this.drawmarkers 。 当我更改缩放比例时，的确确实看到了标记的变化。 因此，唯一的问题是在输入数据更改时我没有收到通知。

在父母那里，我有这条线。 （请记住，更改反映在圈中，而不反映在地图中）。

this.rawLapsData = deletePoints(this.rawLapsData, this.selectedTps);

请注意， this.rawLapsData本身是指向大型json对象中间的指针

this.rawLapsData = this.main.data.TrainingCenterDatabase.Activities[0].Activity[0].Lap;

Answer 11

我知道我不是第一个问这个问题的人，但是我在前面的问题中找不到答案。 我有一个组件

<div class="col-sm-5">
    <laps
        [lapsData]="rawLapsData"
        [selectedTps]="selectedTps"
        (lapsHandler)="lapsHandler($event)">
    </laps>
</div>

<map
    [lapsData]="rawLapsData"
    class="col-sm-7">
</map>

在控制器中， rawLapsdata会发生突变。

在laps ，数据以表格格式作为HTML输出。 每当rawLapsdata更改时，此更改就会更改。

我的map组件需要使用ngOnChanges作为触发器来重绘Google Map上的标记。 问题在于，当父中的rawLapsData更改时，ngOnChanges不会触发。 我能做什么？

import {Component, Input, OnInit, OnChanges, SimpleChange} from 'angular2/core';

@Component({
    selector: 'map',
    templateUrl: './components/edMap/edMap.html',
    styleUrls: ['./components/edMap/edMap.css']
})
export class MapCmp implements OnInit, OnChanges {
    @Input() lapsData: any;
    map: google.maps.Map;

    ngOnInit() {
        ...
    }

    ngOnChanges(changes: { [propName: string]: SimpleChange }) {
        console.log('ngOnChanges = ', changes['lapsData']);
        if (this.map) this.drawMarkers();
    }

更新： ngOnChanges无法正常工作，但好像lapsData正在更新。 在ngInit中是用于缩放更改的事件侦听器，该事件侦听器也称为this.drawmarkers 。 当我更改缩放比例时，的确确实看到了标记的变化。 因此，唯一的问题是在输入数据更改时我没有收到通知。

在父母那里，我有这条线。 （请记住，更改反映在圈中，而不反映在地图中）。

this.rawLapsData = deletePoints(this.rawLapsData, this.selectedTps);

请注意， this.rawLapsData本身是指向大型json对象中间的指针

this.rawLapsData = this.main.data.TrainingCenterDatabase.Activities[0].Activity[0].Lap;

Answer 12

我知道我不是第一个问这个问题的人，但是我在前面的问题中找不到答案。 我有一个组件

<div class="col-sm-5">
    <laps
        [lapsData]="rawLapsData"
        [selectedTps]="selectedTps"
        (lapsHandler)="lapsHandler($event)">
    </laps>
</div>

<map
    [lapsData]="rawLapsData"
    class="col-sm-7">
</map>

在控制器中， rawLapsdata会发生突变。

在laps ，数据以表格格式作为HTML输出。 每当rawLapsdata更改时，此更改就会更改。

我的map组件需要使用ngOnChanges作为触发器来重绘Google Map上的标记。 问题在于，当父中的rawLapsData更改时，ngOnChanges不会触发。 我能做什么？

import {Component, Input, OnInit, OnChanges, SimpleChange} from 'angular2/core';

@Component({
    selector: 'map',
    templateUrl: './components/edMap/edMap.html',
    styleUrls: ['./components/edMap/edMap.css']
})
export class MapCmp implements OnInit, OnChanges {
    @Input() lapsData: any;
    map: google.maps.Map;

    ngOnInit() {
        ...
    }

    ngOnChanges(changes: { [propName: string]: SimpleChange }) {
        console.log('ngOnChanges = ', changes['lapsData']);
        if (this.map) this.drawMarkers();
    }

更新： ngOnChanges无法正常工作，但好像lapsData正在更新。 在ngInit中是用于缩放更改的事件侦听器，该事件侦听器也称为this.drawmarkers 。 当我更改缩放比例时，的确确实看到了标记的变化。 因此，唯一的问题是在输入数据更改时我没有收到通知。

在父母那里，我有这条线。 （请记住，更改反映在圈中，而不反映在地图中）。

this.rawLapsData = deletePoints(this.rawLapsData, this.selectedTps);

请注意， this.rawLapsData本身是指向大型json对象中间的指针

this.rawLapsData = this.main.data.TrainingCenterDatabase.Activities[0].Activity[0].Lap;

Answer 13

我已经尝试了这里提到的所有解决方案，但由于某些原因， ngOnChanges()仍然没有为我开火。 所以我在调用重新填充我的数组的服务之后用this.ngOnChanges()调用它。它正常工作....正确吗？ 可能不是。 整齐？ 一定不行。 作品？ 是！

Answer 14

我知道我不是第一个问这个问题的人，但是我在前面的问题中找不到答案。 我有一个组件

<div class="col-sm-5">
    <laps
        [lapsData]="rawLapsData"
        [selectedTps]="selectedTps"
        (lapsHandler)="lapsHandler($event)">
    </laps>
</div>

<map
    [lapsData]="rawLapsData"
    class="col-sm-7">
</map>

在控制器中， rawLapsdata会发生突变。

在laps ，数据以表格格式作为HTML输出。 每当rawLapsdata更改时，此更改就会更改。

我的map组件需要使用ngOnChanges作为触发器来重绘Google Map上的标记。 问题在于，当父中的rawLapsData更改时，ngOnChanges不会触发。 我能做什么？

import {Component, Input, OnInit, OnChanges, SimpleChange} from 'angular2/core';

@Component({
    selector: 'map',
    templateUrl: './components/edMap/edMap.html',
    styleUrls: ['./components/edMap/edMap.css']
})
export class MapCmp implements OnInit, OnChanges {
    @Input() lapsData: any;
    map: google.maps.Map;

    ngOnInit() {
        ...
    }

    ngOnChanges(changes: { [propName: string]: SimpleChange }) {
        console.log('ngOnChanges = ', changes['lapsData']);
        if (this.map) this.drawMarkers();
    }

更新： ngOnChanges无法正常工作，但好像lapsData正在更新。 在ngInit中是用于缩放更改的事件侦听器，该事件侦听器也称为this.drawmarkers 。 当我更改缩放比例时，的确确实看到了标记的变化。 因此，唯一的问题是在输入数据更改时我没有收到通知。

在父母那里，我有这条线。 （请记住，更改反映在圈中，而不反映在地图中）。

this.rawLapsData = deletePoints(this.rawLapsData, this.selectedTps);

请注意， this.rawLapsData本身是指向大型json对象中间的指针

this.rawLapsData = this.main.data.TrainingCenterDatabase.Activities[0].Activity[0].Lap;

Answer 15

我知道我不是第一个问这个问题的人，但是我在前面的问题中找不到答案。 我有一个组件

<div class="col-sm-5">
    <laps
        [lapsData]="rawLapsData"
        [selectedTps]="selectedTps"
        (lapsHandler)="lapsHandler($event)">
    </laps>
</div>

<map
    [lapsData]="rawLapsData"
    class="col-sm-7">
</map>

在控制器中， rawLapsdata会发生突变。

在laps ，数据以表格格式作为HTML输出。 每当rawLapsdata更改时，此更改就会更改。

我的map组件需要使用ngOnChanges作为触发器来重绘Google Map上的标记。 问题在于，当父中的rawLapsData更改时，ngOnChanges不会触发。 我能做什么？

import {Component, Input, OnInit, OnChanges, SimpleChange} from 'angular2/core';

@Component({
    selector: 'map',
    templateUrl: './components/edMap/edMap.html',
    styleUrls: ['./components/edMap/edMap.css']
})
export class MapCmp implements OnInit, OnChanges {
    @Input() lapsData: any;
    map: google.maps.Map;

    ngOnInit() {
        ...
    }

    ngOnChanges(changes: { [propName: string]: SimpleChange }) {
        console.log('ngOnChanges = ', changes['lapsData']);
        if (this.map) this.drawMarkers();
    }

更新： ngOnChanges无法正常工作，但好像lapsData正在更新。 在ngInit中是用于缩放更改的事件侦听器，该事件侦听器也称为this.drawmarkers 。 当我更改缩放比例时，的确确实看到了标记的变化。 因此，唯一的问题是在输入数据更改时我没有收到通知。

在父母那里，我有这条线。 （请记住，更改反映在圈中，而不反映在地图中）。

this.rawLapsData = deletePoints(this.rawLapsData, this.selectedTps);

请注意， this.rawLapsData本身是指向大型json对象中间的指针

this.rawLapsData = this.main.data.TrainingCenterDatabase.Activities[0].Activity[0].Lap;

Answer 16

我知道我不是第一个问这个问题的人，但是我在前面的问题中找不到答案。 我有一个组件

<div class="col-sm-5">
    <laps
        [lapsData]="rawLapsData"
        [selectedTps]="selectedTps"
        (lapsHandler)="lapsHandler($event)">
    </laps>
</div>

<map
    [lapsData]="rawLapsData"
    class="col-sm-7">
</map>

在控制器中， rawLapsdata会发生突变。

在laps ，数据以表格格式作为HTML输出。 每当rawLapsdata更改时，此更改就会更改。

我的map组件需要使用ngOnChanges作为触发器来重绘Google Map上的标记。 问题在于，当父中的rawLapsData更改时，ngOnChanges不会触发。 我能做什么？

import {Component, Input, OnInit, OnChanges, SimpleChange} from 'angular2/core';

@Component({
    selector: 'map',
    templateUrl: './components/edMap/edMap.html',
    styleUrls: ['./components/edMap/edMap.css']
})
export class MapCmp implements OnInit, OnChanges {
    @Input() lapsData: any;
    map: google.maps.Map;

    ngOnInit() {
        ...
    }

    ngOnChanges(changes: { [propName: string]: SimpleChange }) {
        console.log('ngOnChanges = ', changes['lapsData']);
        if (this.map) this.drawMarkers();
    }

更新： ngOnChanges无法正常工作，但好像lapsData正在更新。 在ngInit中是用于缩放更改的事件侦听器，该事件侦听器也称为this.drawmarkers 。 当我更改缩放比例时，的确确实看到了标记的变化。 因此，唯一的问题是在输入数据更改时我没有收到通知。

在父母那里，我有这条线。 （请记住，更改反映在圈中，而不反映在地图中）。

this.rawLapsData = deletePoints(this.rawLapsData, this.selectedTps);

请注意， this.rawLapsData本身是指向大型json对象中间的指针

this.rawLapsData = this.main.data.TrainingCenterDatabase.Activities[0].Activity[0].Lap;

Answer 17

我知道我不是第一个问这个问题的人，但是我在前面的问题中找不到答案。 我有一个组件

<div class="col-sm-5">
    <laps
        [lapsData]="rawLapsData"
        [selectedTps]="selectedTps"
        (lapsHandler)="lapsHandler($event)">
    </laps>
</div>

<map
    [lapsData]="rawLapsData"
    class="col-sm-7">
</map>

在控制器中， rawLapsdata会发生突变。

在laps ，数据以表格格式作为HTML输出。 每当rawLapsdata更改时，此更改就会更改。

我的map组件需要使用ngOnChanges作为触发器来重绘Google Map上的标记。 问题在于，当父中的rawLapsData更改时，ngOnChanges不会触发。 我能做什么？

import {Component, Input, OnInit, OnChanges, SimpleChange} from 'angular2/core';

@Component({
    selector: 'map',
    templateUrl: './components/edMap/edMap.html',
    styleUrls: ['./components/edMap/edMap.css']
})
export class MapCmp implements OnInit, OnChanges {
    @Input() lapsData: any;
    map: google.maps.Map;

    ngOnInit() {
        ...
    }

    ngOnChanges(changes: { [propName: string]: SimpleChange }) {
        console.log('ngOnChanges = ', changes['lapsData']);
        if (this.map) this.drawMarkers();
    }

更新： ngOnChanges无法正常工作，但好像lapsData正在更新。 在ngInit中是用于缩放更改的事件侦听器，该事件侦听器也称为this.drawmarkers 。 当我更改缩放比例时，的确确实看到了标记的变化。 因此，唯一的问题是在输入数据更改时我没有收到通知。

在父母那里，我有这条线。 （请记住，更改反映在圈中，而不反映在地图中）。

this.rawLapsData = deletePoints(this.rawLapsData, this.selectedTps);

请注意， this.rawLapsData本身是指向大型json对象中间的指针

this.rawLapsData = this.main.data.TrainingCenterDatabase.Activities[0].Activity[0].Lap;

Answer 18

我知道我不是第一个问这个问题的人，但是我在前面的问题中找不到答案。 我有一个组件

<div class="col-sm-5">
    <laps
        [lapsData]="rawLapsData"
        [selectedTps]="selectedTps"
        (lapsHandler)="lapsHandler($event)">
    </laps>
</div>

<map
    [lapsData]="rawLapsData"
    class="col-sm-7">
</map>

在控制器中， rawLapsdata会发生突变。

在laps ，数据以表格格式作为HTML输出。 每当rawLapsdata更改时，此更改就会更改。

我的map组件需要使用ngOnChanges作为触发器来重绘Google Map上的标记。 问题在于，当父中的rawLapsData更改时，ngOnChanges不会触发。 我能做什么？

import {Component, Input, OnInit, OnChanges, SimpleChange} from 'angular2/core';

@Component({
    selector: 'map',
    templateUrl: './components/edMap/edMap.html',
    styleUrls: ['./components/edMap/edMap.css']
})
export class MapCmp implements OnInit, OnChanges {
    @Input() lapsData: any;
    map: google.maps.Map;

    ngOnInit() {
        ...
    }

    ngOnChanges(changes: { [propName: string]: SimpleChange }) {
        console.log('ngOnChanges = ', changes['lapsData']);
        if (this.map) this.drawMarkers();
    }

更新： ngOnChanges无法正常工作，但好像lapsData正在更新。 在ngInit中是用于缩放更改的事件侦听器，该事件侦听器也称为this.drawmarkers 。 当我更改缩放比例时，的确确实看到了标记的变化。 因此，唯一的问题是在输入数据更改时我没有收到通知。

在父母那里，我有这条线。 （请记住，更改反映在圈中，而不反映在地图中）。

this.rawLapsData = deletePoints(this.rawLapsData, this.selectedTps);

请注意， this.rawLapsData本身是指向大型json对象中间的指针

this.rawLapsData = this.main.data.TrainingCenterDatabase.Activities[0].Activity[0].Lap;

Answer 19

不是一个干净的解决方案，但您可以通过以下方式触发检测：

rawLapsData = JSON.parse(JSON.stringify(rawLapsData))

Answer 20

只需在事件中发送 object 或数组即可。 切勿将字符串或数字从父母发送给孩子。 它会起作用的。 我有 2 个子组件和一个父组件。 这是我的 Parent.ts：发送直接事件 object。

dataFrom1To2:any;
dataFrom2To1:any;
  onBallPassEventFrom1(event:any){
    this.dataFrom1To2 = event;
  }

  onBallPassEventFrom2(event:any){
    this.dataFrom2To1 = event;
  }

而 parent.html 是：

<div>I Am The Parent Component!</div>
<div>
    <app-child1 (ballPassEventFrom1)="onBallPassEventFrom1($event)" [datafrom2]="dataFrom2To1"></app-child1>
</div>
<div>
    <app-child2 [datafrom1]="dataFrom1To2" (ballPassEventFrom2)="onBallPassEventFrom2($event)"></app-child2>
</div>