Question

我正面临有关我的表单提交的问题。当我提交表单时，这些值会被很好地更新，但不是被动的。我必须刷新页面才能看到修改。我正在使用Ionic v4 / Angular 8 / API。

  onFormSubmit(){
        this.isLoadingResults = true;
        this.invoiceService.updateInvoiceItems(this.data[0]['id'], this.form.value)
          .subscribe((res:any) => {
            const id = res.id;
            this.isLoadingResults = false;
            this.router.navigate(['/invoice-details', this.data[0]['invoice_id']]).then(() => {window.location.reload()});
          }, (err: any) => {
            console.log(err);
            this.isLoadingResults = false
          }
         );
      }

为了测试，我正在使用该属性

window.location.reload（）

但这不是我想要的干净代码。

谢谢

Answer 1

使用BehaviourSubject动态更新数据而无需刷新页面。

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class invoiceService {

    public myData: BehaviorSubject<SomeType[]> = new BehaviorSubject<SomeType[]>([]);

    constructor(private storage: Storage) {  }


    updateInvoiceItems(data): Observable<any>  {

        this.myData.next(data);
        return this.myData.asObservable();

    }

}

export class InvoiceComponent implements OnInit {
  updatedData : Observable<boolean>;

  constructor( public authService : AuthService ) {
    this.updatedData = invoiceService.updateInvoiceItems(formData);
  }
}

Answer 2

invoice-service.ts

  getInvoice(id:number): Observable<Invoice>{
    return this.http.get<Invoice>(`${environment.apiUrl}api/invoices/${id}`)
}

getInvoiceItems(invoiceId:number): Observable<InvoiceItem[]> {
    return this.http.get<InvoiceItem[]>(`${environment.apiUrl}api/invoiceitems`)
    .pipe(
        map((invoiceitems : InvoiceItem[]) => invoiceitems.filter(inv => inv.invoice_id == invoiceId))
    );
}

 updateInvoiceItems(id:any, invoiceitems:any):Observable<any>{
        return this.http.patch(`${environment.apiUrl}api/invoiceitems/${id}`, invoiceitems, this.httpOptions)
          .pipe(
            tap(_ => console.log(`updated invoice id=${id}`)))
    }

invoice-details.ts

 ngOnInit() {

    this.id = this.route.snapshot.params['id'];

    this.invoiceService.getInvoice(this.id).subscribe(result => {
      this.item = result;
      //console.log(this.item)
    })
    this.invoiceService.getInvoiceItems(this.id).subscribe(result => {
      this.data = result;
     //console.log(this.data)
    })
  }

Answer 3

经过研究，我做到了！

我在Submit函数中使用了events属性，以将其重定向到在编辑后显示数据的函数。

没有刷新页面，FormSubmit不会更新值

3 个答案: