[英]Why is the parent component able to get Observable type data from Angular service but the parent is unable to pass the data to the child component?
Parent component displays the data correctly but it is not sending the asynchronously populated data to the child component 父组件正确显示数据,但没有将异步填充的数据发送到子组件
I am new to Angular and I am following its documentation from this page: https://angular.io/guide/component-interaction I am able to read file details into a parent component asynchronously using an Angular service. 我是Angular的新手,并且正在关注此页面的文档: https : //angular.io/guide/component-interaction我能够使用Angular服务将文件详细信息异步读取到父组件中。 When I display the file details from the parent component, I can see that the file was read correctly.
当我显示来自父组件的文件详细信息时,可以看到文件已正确读取。 When I am passing the data using @Output() variable and receiving it in the child component using @Input, I am getting empty data as if the child component received the Input synchronously but not asynchronously.
当我使用@Output()变量传递数据并使用@Input在子组件中接收数据时,我正在获取空数据,就好像子组件是同步而非异步接收到Input一样。
Here's the service: 这是服务:
import { Injectable } from '@angular/core'; import { Observable, of } from 'rxjs'; import { HttpClient } from '@angular/common/http'; import {inFile} from '../Classes/inFile'; @Injectable({ providedIn: 'root' }) export class AddFilesService { inFileObj = new inFile(); inFiles:any = []; constructor(private http:HttpClient) { } uploadFiles(event){ const files = event.target.files; for (let i=0; i<= files.length-1 ; i++){ const file = files[i]; const fileName = file.name; const reader = new FileReader(); //ASYNCHRONOUS FILE READ reader.onload = () => { this.inFileObj.name = fileName; this.inFileObj.size = file.size; }; reader.readAsArrayBuffer(file); } this.inFiles.push(this.inFileObj); return of(this.inFiles); } }
Here's the parent component component that takes a file input and displays file name and file size:
这是父组件组件,它接受文件输入并显示文件名和文件大小:
import { Component, OnInit, Output } from '@angular/core';
import {AddFilesService} from '../../services/add-files.service';
@Component({
selector: 'app-input-form',
templateUrl: './input-form.component.html',
styleUrls: ['./input-form.component.css']
})
export class InputFormComponent implements OnInit {
inFiles:any = [];
@Output() uploadedFileDetails:string;
constructor(private addFilesService: AddFilesService) { }
ngOnInit() {
}
fileUpload(event) : void {
this.addFilesService.uploadFiles(event).subscribe(
data => {
//THIS WORKS
this.inFiles = data;
//THIS DOES NOT WORK
this.uploadedFileDetails = data;
},
error =>{
console.log(error);
}
);
}
}
Here's the parent HTML template: 这是父HTML模板:
`<input type="file" (change)="fileUpload($event)" multiple>
<table>
<tbody>
<tr *ngFor = "let inFile of inFiles">
<td>Name from Parent: {{inFile.name}}</td>
<td>Size from Parent: {{inFile.size}}</td>
</tr>
</tbody>
</table>`
Output from parent component: 父组件的输出:
Name from Parent: Test.txt Size from Parent: 57
Here's the child component: 这是子组件:
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.css'],
})
export class MapComponent implements OnInit {
@Input() uploadedFileDetails:string;
constructor() {}
ngOnInit() {
}
}
Here's the child HTML which has no output: 这是没有输出的子HTML:
`<table>
<tbody>
<tr *ngFor = "let inFile of uploadedFileDetails">
<td>Name from Child: {{inFile.name}}</td>
<td>Size from Child: {{inFile.size}}</td>
</tr>
</tbody>
</table>`
You have 2 problems: 您有2个问题:
First you don't use Output()
in the parent components only in the child components to Emit and Event with data for example to the parent data to the child. 首先,不要仅在子组件中的父组件中使用
Output()
来将数据发射和事件,例如将子数据与父数据一起使用。
And you are missing this line 而你错过了这一行
<app-map [uploadedFileDetails]="uploadedFileDetails"><app-map>
Where [uploadedFileDetails]
is your @Input
variable in the child component 其中
[uploadedFileDetails]
是子组件中的@Input
变量
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.