Запретить привязку данных для дочернего компонента в ngFor - PullRequest
Новая
       5

Запретить привязку данных для дочернего компонента в ngFor

1 голос
/ 29 марта 2020

У меня есть компонент, который использует дочерний компонент внутри ngFor l oop. Этот дочерний компонент имеет привязку данных, которая читается с @Input.

Проблема, с которой я сталкиваюсь, заключается в том, что при передаче данных sh в дочерний компонент каждый экземпляр дочернего компонента получает одно и то же значение. Есть ли способ получить данные pu sh только для указанного c экземпляра привязки дочернего компонента в ngFor?

Вот фиктивный пример, который я создал

Я хочу, чтобы это работало таким образом, когда я нажимаю первую кнопку, только первый дочерний компонент должен получить значение, а второй должен быть пустым.

Я новичок в среде angular, поэтому любая помощь будет большой.

1 Ответ

1 голос
/ 29 марта 2020

pushToChild будет распространяться среди детей, поэтому давайте не будем его использовать. Самым простым способом, который я могу придумать, является передача значений непосредственно дочерним элементам с использованием дочернего элемента DOM, преобразованного в объявление переменной (#child), которое является уникальным при циклическом выполнении.

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