将数据从组件 UploadFile 传输到 Angular 8 中的组件父级

问题描述

我想将数据从 Upload.component 传输到 personAdd.component 但是没有传输！！！ 代码如下。

personAdd.component.html

enter code here

 <div class="container">

 <form #personAddForm="ngForm" class="form-signin" (ngSubmit)="personAdd()">

<div class="row section1">
  <div class="col-lg-9 col-md-9">
    <div class="row">
      <div class="col-lg-6 col-md-6">
        <div>
          <label for="name"><b>نام</b></label>

          <input type="text" placeholder="نام" name="name" id="name" [(ngModel)]="person.name" 
    required>
        </div>
        <div>
          <label for="father_name"><b>نام پدر</b></label>
          <input type="text" placeholder="نام پدر" name="father_name" id="father_name" 
 [(ngModel)]="person.father_name" required>
        </div>
        <div>
          <label for="code_melli"><b>کد ملی</b></label>
          <input type="text" placeholder="کد ملی" name="code_melli" id="code_melli" 
  [(ngModel)]="person.code_melli" required>
        </div>
        <div>
          <label for="mahale_sodor"><b>صادره</b></label>
          <input type="text" placeholder="صادره" name="mahale_sodor" id="mahale_sodor" [(ngModel)]="person.mahale_sodor" required>
        </div>
        <div>
          <label for="telephone"><b>تلفن</b></label>
          <input type="text" placeholder="تلفن" name="telephone" id="telephone" [(ngModel)]="person.telephone" required>
        </div>
      </div>
      <div class="col-lg-6 col-md-6">
        <div>
          <label for="parvandeno"><b>نام خانوادگی</b></label>
          <input type="text" placeholder="نام خانوادگی" name="family" id="family" [(ngModel)]="person.family" required>
        </div>
        <div>
          <label for="tarikh_tavalod" style="margin-bottom:15px"><b>تاریخ تولد</b></label><br />
          <dp-date-picker name="tarikh_tavalod" dir="rtl"
                          [(ngModel)]="person.tarikh_tavalod"
                          mode="day"
                          placeholder="تاریخ"
                          theme="dp-material">
          </dp-date-picker>
        </div>
      </div>
    </div>
    
  </div>
  <div class="col-lg-3 col-md-3">
    <div class="row">
      <app-upload ></app-upload>
    </div> 
  </div>
</div>

<div class="row m-1">
  <button class="btn btn-lg btn-info btn-block text-uppercase" style=" width: 100px; height: 40px; padding: 3px;" type="submit"><i class="fa fa-save"></i> ثبت</button>
</div>

**Upload.component.ts如下**

import { Component,OnInit,Output,EventEmitter } from '@angular/core';
import { HttpEventType,HttpClient } from '@angular/common/http';
import { Router } from '@angular/router'; 

@Component({
selector: 'app-upload',templateUrl: './Upload.component.html',styleUrls: ['./Upload.component.css']
})
export class UploadComponent {
 fileData: File = null;
previewUrl: any = null;
fileUploadProgress: string = null;
uploadedFilePath: string = null;
public progress: number;
public message: string;
public pathImage: string;
@Output() public onUploadFinished = new EventEmitter();

constructor(private http: HttpClient) { }
ngOnInit() {
 }

 preview() {
  // Show preview 
  var mimeType = this.fileData.type;
   if (mimeType.match(/image\/*/) == null) {
   return;
 }
 var reader = new FileReader();
reader.readAsDataURL(this.fileData);
reader.onload = (_event) => {
this.previewUrl = reader.result;
}

}  
public uploadFile = (files: any) => {
if (files.length === 0) {
  return;
}
this.fileData = <File>files[0];
const formData = new FormData();
formData.append('file',this.fileData,this.fileData.name);
this.pathImage = this.fileData.name;
this.preview();
this.onUploadFinished.emit(this.fileData);
console.log(this.fileData);
 }

}

personService如下

enter code here
 export class personService {
 baseUrl = "http://localhost:56883/api/Person/";
  private options = { headers: new HttpHeaders().set('Content-Type','application/json') };
 public uploader: FileUploader = new FileUploader({ url: this.baseUrl,itemAlias: 'file' });
 constructor(private http: HttpClient) { }

  registerPerson(person: any,formData) {
  return this.http.post(this.baseUrl + 'Addperson',person);
  }
 }

personAdd.component.ts如下

enter code here
export default class PersonAddComponent implements AfterViewInit {
person: any = {};
@ViewChild(UploadComponent,{ static: false }) public childreference: UploadComponent;
uploadfil: any;
uploadfilName: any;
ngAfterViewInit() {
this.uploadfilName = this.childreference.fileData.name;
console.log(this.uploadfilName);
this.uploadfil = this.childreference.fileData;
}
constructor(private personService: personService) {

}
 public uploadFinished = (event) => {
 this.response = event;
}
 title = 'ng8fileuploadexample';

 ngOnInit() {

 }
 public createImgPath = (serverPath: string) => {
  return `https://localhost:56883/${serverPath}`;
 }

 personAdd() {

 const formData = new FormData();
 formData.append('file',this.uploadfil,this.uploadfilName);

  this.personService.registerPerson(this.person,formData ).subscribe(() => {
  alert("عملیات با موفقیت انجام شد");
  console.log("register suucssfuly");
  },error => {
    alert("خطا در ارسال داده");
    console.log("register faild");
  });
 }
 }

 

当我按下注册按钮时什么都不会发送？ 请指导我

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）