[英]Pass API returning array data from Parent component to Child Component in Angular
[英]How to pass array from child to parent component angular 8
我正在制作应用程序,该应用程序在顶部有一个按钮添加视频,该按钮打开带有 4 个输入和 1 个按钮添加的对话框,当我单击按钮添加时,我想从数组视频中的输入推送数据,例如对象。 然后我想将 arrayVideos 从 add-video-form 传递给应用程序组件,并在应用程序组件的表格中显示该数组(该表格显示视频列表,在该列表中我有视频名称、视频网址、作者和描述。
这是一个添加视频表单:
export class AddVideoFormComponent implements OnInit {
videoForm: FormGroup;
@Output() public childEvent = new EventEmitter();
arrayVideos = [];
constructor(public dialogRef: MatDialogRef<AddVideoFormComponent>) { }
ngOnInit() {
this.videoForm = new FormGroup({
videoname : new FormControl('', Validators.required),
url : new FormControl('', Validators.required),
author : new FormControl('', Validators.required),
description : new FormControl('', Validators.required),
});
}
onSubmit() {
console.warn(this.videoForm.value);
this.dialogRef.close(this.arrayVideos.push(this.videoForm.value));
this.childEvent.emit(this.arrayVideos);
}
}
这是一个应用组件的 ts
export interface PeriodicElement {
videoname: string;
url: string;
author: string;
description: string;
}
const ELEMENT_DATA: PeriodicElement[] = [
{videoname: 'Shakira - dance', url: 'blablablablablablabla', author: 'Shakira', description: 'some desc'},
{videoname: 'Justin - break', url: 'nanananananananananana', author: 'Justin', description: 'some desc2'},
];
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Zadatak';
exampleParent: [];
displayedColumns: string[] = ['videoname', 'author', 'description', 'url' ];
dataSource = ELEMENT_DATA;
constructor(public dialog: MatDialog) {}
openDialog() {
this.dialog.open(AddVideoFormComponent);
}
}
您可以使用afterClosed
方法。 https://material.angular.io/components/dialog/api
const dialogRef = this.dialog.open(AddVideoFormComponent);
dialogRef.afterClosed().subscribe(x => ...);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.