typescript subscribe refresh onsubmit 方法

Question

产品-generic.service.ts

constructor(
    private genericParaBirimi: GenericService<ParaBirimi, 0>,
) {
    //#region List
    this.genericParaBirimi?.Get_All("ParaBirimis/Generic_Method").subscribe((x: any) => this.paraBirims = x);     
}

首价-list.component.ts

constructor( 
public productservice : ProductService) { }
this.genericParaBirimi?.Post(this.ParaBirimForm.value, "ParaBirimis/Generic_Method").subscribe({
  next: (data) => { },
  error: (err) => { },
  complete: () => {
    
    Refresh parabirims in html
  }
});

首价-list.component.html

 <p-autoComplete formControlName="ParaBirimiID" [suggestions]="filteredParaBirimi"
                    (completeMethod)="filterParaBirims($event)" field="paraBirim" [dropdown]="true">
                    <div *ngFor="let item of productservice.paraBirims" class="country-item">
                        <div>{{item.paraBirim}}</div>
                    </div>
                </p-autoComplete>

如何使用添加到parabirims列表后自动更新页面而不刷新页面的方法？

Answer 1

我们需要做的第一件事是保持 paraBirimi 状态包含在服务中。按照设计，您不应从任何组件调用 API 请求。

下一步是将您的 GET 和 POST 更新打包到组件可以订阅的单个可观察对象中。让我们进入代码。

服务文件

public paraBirimis$: Observable<ParaBirimi[]>;
private addParaBirimi = new Subject<ParaBirimi>();

constructor(private http:HttpClient){
  this.paraBirimis$ = this.http
  .get<ParaBirimi[]>(`${environment.url}/ParaBirimis/Generic_Method`)
  .pipe(
    switchMap(api => this.paraBirimiUpdate.pipe(
      scan((list, new)=>[...list, new], api),
      startWith(api)
    )),
  );
}

public postParaBirimi(payload) {
  this.http
  .post<ParaBirimi[]>(`${environment.url}/ParaBirimis/Generic_Method`, payload)
  .pipe(
    tap(newParaBirimi=>this.addParaBirimi.next(newParaBirimi))
  ).subscribe();
}

我们的 public observable paraBirimis$ 首先从 GET 端点获取数据。然后我们将 switchMap 切换到一个 Subject 中，它将发出从我们的 POST 请求中创建的任何新的 paraBirimi。 scan() 运算符类似于 .reduce()，但用于从 observables 发出的值。 https://www.learnrxjs.io/learn-rxjs/operators/transformation/scan 简而言之，我们正在获取从 Subject 发出的值，并通过展开运算符将它们添加到我们的状态数组中。

因为 Subjects 不发出任何开始的东西，我们包含 startWith() 运算符让它发出我们的 GET API 请求作为第一个值。

接下来，我们需要我们的 Subject 在 POST 请求后发出新值。我们创建一个 public 方法来触发我们的 POST 请求，然后使用 .next() 因此 Subject 将发出新值，触发 switchMap() 在我们的 public 可观察到。

通过我们服务中的反应式管道设置，我们的组件可以非常简单，因为我们的可观察对象将自动更新任何状态变化。我们唯一需要包括的新东西是在我们的服务中调用 postParaBirimi() 的方法。

组件 TS

this.paraBirims$ = this.productservice.paraBirims$;

public postParaBirimi(){
  this.productservice.postParaBirimi(this.ParaBirimForm.value);
}

组件HTML

<p-autoComplete
  formControlName="ParaBirimiID"
  [suggestions]="filteredParaBirimi"
  (completeMethod)="filterParaBirims($event)"
  field="paraBirim"
  [dropdown]="true"
>
  <div *ngFor="let item of paraBirims$ | async" class="country-item">
    <div>{{item.paraBirim}}</div>
  </div>
</p-autoComplete>

就是这样。您的组件对我们在服务中创建的可观察对象有一个有效订阅。在我们的服务中调用 POST 事件将导致同一个可观察对象发出一个包含新创建值的新列表。

typescript subscribe refresh onsubmit 方法

typescript subscribe refresh onsubmit metod

rxjs

typescript

angular