问防止ngFor中子组件的数据绑定

EN

import { Component } from '@angular/core';
import { ChildComponent } from './child-component/child.component';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  object: { [key: number]: string } = { 2: 'foo', 1: 'bar' };

  push(value: any, child: ChildComponent) {
    child.data = value;
  }
}

<span>
  <p>Some dummy list</p>
  <div *ngFor="let item of object | keyvalue"
       style="background:gray; margin-top:0.5rem">
    Click button to push value: {{ item.key }} to child
    <button (click)="push(item.key, childRef)">Push</button>
    <child-component #childRef></child-component>
  </div>
</span>