我有两个函数,我想将它们合并为一个函数,并且仅添加一个记录,而不是两个记录

时间:2019-05-27 14:20:39

标签: angular

我有两个功能,我想将它们合并为一个功能,并仅添加一个记录,而不是两个记录

我该如何解决

服务 在服务两个功能

addNews(_INewsModu: INewsModule){
  var body = JSON.stringify(_INewsModu);
  var headerOptions = new Headers({'Content-Type': 'application/json'});

  var requsetOptions = new RequestOptions({method : RequestMethod.Post,headers :headerOptions});
  
  
  
  postFile(caption: string, fileToUpload: File){

  const endpoint = 'http://localhost:56181/api/UploadImage';
  const formData: FormData = new FormData();
  formData.append('Image',fileToUpload,fileToUpload.name);
  formData.append('ImageCaption',caption);
  return this.http.post(endpoint,formData);
}

组件
在组件

中调用2函数

如何将它们合并为一个函数并仅添加一个记录而不是两个记录

OnSubmit2(Caption,Image){
  this._NewsService.postFile(Caption.value,this.fileToUpload).subscribe(
    data =>{
      console.log('done');
      Caption.value=null;
      Image.value = null;
      this.toastr.success("New IMAGE Added Successfuly", "IMAGE");

    }
  )
}
OnSubmit(form :NgForm){
  if (form.value.IDNews == null ){
    this._NewsService.addNews(form.value).subscribe(data =>{
      this.resetForm(form); 
      this.toastr.success("New Record Added Successfuly", "News");
  })

我该如何解决

模板

<form class="emp-form" #employeeForm="ngForm" (ngSubmit)="newSubmit(employeeForm,Caption,Image)">


<input type="hidden" name="IDNews" #IDNews="ngModel" [(ngModel)]="_NewsService._INewsModule.IDNews">
<div class="form-row">
    <input class="form-control" name="IDCategoery" #IDCategoery="ngModel" [(ngModel)]={{selected}}
    placeholder="ID Categoery" required>

<div class="validation-error" *ngIf="IDCategoery.invalid && IDCategoery.touched">This Field is Required.</div>
</div> -->
<div style="float:left;padding:10px;margin:0 auto;" *ngIf="myCat_News">
<select [(ngModel)]="selected" name="myCat_News" >
<option *ngFor="let book of myCat_News" [(ngValue)]="book.NameCategory && book.IDCategoery">{{book.NameCategory}}</option>

  </select>

<input  class="form-control" name="IDCategoery" #IDCategoery="ngModel" [(ngModel)]=selected>

</div>
<div class="form-group col-md-6">

<input class="form-control" name="NameNews" #NameNews="ngModel" [(ngModel)]="_NewsService._INewsModule.NameNews" placeholder="NameNews"
    required>

<div class="validation-error" *ngIf="NameNews.invalid && NameNews.touched">This Field is Required.</div>
</div>
</div>

<div class="form-group">

<textarea  class="form-control" name="TopicNews" #TopicNews="ngModel" [(ngModel)]="_NewsService._INewsModule.TopicNews" placeholder="TopicNews">        </textarea>

</div>
<div class="form-row">

<div class="form-group col-md-6">

<input class="form-control" name="DateNews" #DateNews="ngModel" [(ngModel)]="_NewsService._INewsModule.DateNews" placeholder="Emp Code">
</div>

<div class="row">
<div class="input-field col s12">
<input type="text" #Caption ngModel name="Caption" id="Caption" required>
<label for="Caption">Caption</label>
</div>
</div>
<img [src]="imageUrl"  style="width:250px;height:200px">
<input type="file" #Image accept="image/*" (change)="handleFileInput($event.target.files)">

<!-- <div style="float:left;padding:10px;margin:0 auto;" *ngIf="myCat_News">
<select [(ngModel)]="selected"name="myCat_News">
<option *ngFor="let book of myCat_News" [(ngValue)]="book.IDCategoery">{{book.IDCategoery}}</option>
</select>
<p>{{ selected }}</p>
</div> -->
</div>
<div class="form-row">
<div class="form-group col-md-8">

<button [disabled]="!employeeForm.valid" type="submit" class="btn btn-lg btn-block btn-info">

<i class="fa fa-floppy-o"></i> Submit</button>
</div>
<div class="form-group col-md-4">
<button type="button" class="btn btn-lg btn-block btn-secondary" (click)="resetForm(employeeForm)">
<i class="fa fa-repeat"></i> Reset</button>
</div>
</div>
</form> 

1 个答案:

答案 0 :(得分:1)

您可以使用forkJoin

import { forkJoin } from 'rxjs';

...

newSubmit(form :NgForm, Caption,Image) {
    const add$ = form.value.IDNews == null ? this._NewsService.addNews(form.value) : empty();

    forkJoin(
      this._NewsService.postFile(Caption.value,this.fileToUpload),
      add$
    )
    .subscribe(data => {
      console.log(data); // data will be result of both observables
     });
}