Я новичок в 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 />
Я ожидаю получить для каждого дочернего элемента правильные данные изродитель Заранее благодарю за помощь