Angular-带有ngFor的父项在移动到ngFor中的新项之前等待子项单击

Question

我的问题是如何强制列表中的以下项目等待子按钮被点击。我不会把我尝试过的所有无效审判都包括在内。。。。。。

这是父组件代码：

import {Component, OnInit} from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {
mockData = ['Curly', 'Moe', 'Larry', 'Shemp'];
constructor() {
}
ngOnInit(): void {
}
}

这是父html代码：

<app-child *ngFor="let name of mockData" [name] = name></app-child>

这是子类型脚本代码：

import {Component, Input, OnInit} from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
@Input() name: string;
constructor() {
}
ngOnInit(): void {
}
onClick(): void {
console.log(`${this.name} has been clicked`);
}
}

这是子html代码：

<div>
<p>{{name}}</p>
<button (click) = onClick()> Wait for Me to Click</button>
</div>

Answer 1

父HTML

<app-child *ngFor="let name of mockData" [name]=name (childClicked)="onChildClicked($event)"></app-child>

父TS

onChildClicked(name: string): void {
console.log('child ' + name + ' was clicked.');
}

子TS

@Output() childClicked: EventEmitter<string> = new EventEmitter<string>();
onClick(): void {
this.childClicked.emit(this.name);
}

子HTML

<div>
<p>{{name}}</p>
<button (click)="onClick()">Wait for Me to Click</button>
</div>