我有两个功能,我想将它们合并为一个功能,并仅添加一个记录,而不是两个记录
我该如何解决
服务 在服务两个功能
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);
}
组件
在组件
如何将它们合并为一个函数并仅添加一个记录而不是两个记录
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>
答案 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
});
}