Данные поступают только по 2-му клику (с задержкой и ошибкой) - PullRequest
0 голосов
/ 11 октября 2019

Я новичок в Angular, и мне нужна ваша помощь. Я пытаюсь настроить родительский элемент, контролирующий видимость popUp в дочернем компоненте. Я пытаюсь получить данные из родительского элемента в дочернем элементе. Я нажимаю div на клике с собственным PoPup,и каждый div имеет собственный PoPup и собственный статус isVisible: true или false и индекс

Я пытался использовать методы async / await для ожидания данных в дочернем компоненте

Вот дочерний компонент .ts

export class Child implements OnInit {
  @Input() index;
  @Input() objectForChild;
  @Output() sayHi = new EventEmitter();
  public currentVisibility: boolean = false;

  ngOnInit() {
}
  public async showHiddenBtn(event) {
    event.stopPropagation();
    this.objectForChild = this.currentVisibility
    await console.log(this.objectForChild); // f.e I push 1st div , I want to see 
{index: 0, isVisible: true} but it shows undefined when I make 2nd click on 2nd div 
I want to see {index: 1, isVisible: true} but it shows {index: 0, isVisible: true}.
  }

}

Вот код из Parent.ts

 public objectForChild; // this variable is passing to child component

  ngOnInit() {
   this.copyFavouriteList = favoriteList.favorites.filter(favorite => favorite.type === 'payment');
      let i;
      for (i = 0 ; i < this.copyFavouriteList.length ; i++){
        let obj = {
          'index': i,
          'isVisible': false
        };
        this.copyOfArr.push(obj);
      }
    })
  }

  async takeEmit(index){
    let foundArray =  this.copyOfArr.filter(elem => {
      return elem.index === index
    });
    if(foundArray){
      foundArray[0].isVisible = !foundArray[0].isVisible;
    }
    this.objectForChild = await {...foundArray[0]};
    console.log(this.objectForChild); // shows the correct data 
{index: 0, isVisible: true} at moment of the click
  }

Вот Parent.html:

<parent *ngFor="let favorite of favoriteList; let i = index">
 ...
  <child [index]="i" (sayHi)="takeEmit($event)" 
  [objectForChild]="objectForChild">
                  </child>
            </div>
<parent />

Я ожидаю получить для каждого дочернего элемента правильные данные изродитель Заранее благодарю за помощь

...