防止 ngFor 中子組件的數據綁定

Question

我有一個在 ngFor 循環中使用子組件的組件。 此子組件具有使用@Input讀取的數據綁定。

我面臨的問題是，當我將數據推送到子組件時，子組件的每個實例都獲得相同的值。 有沒有辦法只為ngFor中子組件綁定的特定實例推送數據？

這是我創建的一個虛擬示例

當我單擊第一個按鈕時，我希望它以這種方式工作，只有第一個子組件應該獲得值，但第二個應該為空。

我是角度環境的新手，所以任何幫助都會很棒。

Answer 1

pushToChild將在孩子之間共享，所以我們不要使用它。 我能想到的最簡單的方法是使用轉換為變量聲明 ( #child ) 的子 DOM 元素將值直接傳遞給子元素，該變量聲明在循環時是唯一的。

.ts

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;
  }
}

.html

<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>