如何解决Angular - 带有 ngFor 的父级在移动到 ngFor 中的新项目之前等待子级单击
我的问题是如何强制列表中的以下项目等待子按钮被点击。 我不会包括所有我尝试过的失败......
这是父组件代码:
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>
解决方法
父 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。