下拉字段正在无限期地使用 API 调用函数

Question

我必须使用 API 的响应填充下拉列表。问题是 api 需要很少的查询参数 X 和 Y，它们基于屏幕中可以更改的不同字段，所以我不能调用 getCategoryByXandY API 在 ngOnInIt() 中一次。

目前我可以使用它，但是当我 select 下拉菜单时，fetchCategories 函数被一次又一次地调用，导致 API 被发送垃圾邮件。我在不同的地方读到这会导致很大的性能问题，但我无法弄清楚如何使用 Pure Pipes 来解决这个问题。如果那是正确的方向，有人可以帮助我吗？怎么会这样？

服务：

  @Injectable()
  export class CategoryRestService {
      private walletsUrl = 'api/items';
      constructor(
        private http: HttpClient
      ) {}
     ...
     getCategoryByXandY(X: string, Y: string): Observable<CategoryDto[]> {
       const url = `${this.itemUrl}/category/?param1=${X}&param2=${Y}`;
       return this.http.get<CategoryDto[]>(url);
     }
  }

HTML

    ...
    <mat-form-field fxFlex.gt-sm="31%" *ngIf="isRequired()">
            <mat-label>
                Category
            </mat-label>
            <mat-select
                formControlName="category"
                [required]="isRequired()">

                <mat-option
                    *ngFor="let c of fetchCategories()"
                    [value]="c.id">

                    {{c.name}}
                </mat-option>
            </mat-select>
        </mat-form-field>

组件

 {
   categories: CategoryDto[]

   constructor(
      categoryService: CategoryRestService
   ){ } 

   ...

   fetchCategories() {
       const X = this.getControl('x').value;
       const Y = this.getControl('y').value;
       this.categoryService.getCategoryByXandY(x, y).subscribe(
          categories => {
             categories.filter(category => category.status === 'ACTIVE');
             this.categories = categories;
          }
       );
       return this.categories;
    }
}

更新除了 David 的建议，我在 x 和 y 的表单字段上有一个 .valueChange 来触发 API 并更新 categories

Answer 1

将 fetchCategories() 的 let c 更改为类别的 let c。将其指向数据集，而不是函数。

HTML

    <mat-form-field fxFlex.gt-sm="31%" *ngIf="isRequired()">
      <mat-label>
          Category
      </mat-label>
      <mat-select
          formControlName="category"
          [required]="isRequired()"
          >
          <mat-option
              *ngFor="let c of categories"
              [value]="c.id"
(click)="selected(c)"
>
              {{c.name}}
          </mat-option>
      </mat-select>
    </mat-form-field>

组件

在构造函数或 ngOnInit() 中添加这个

this.fetchCategories()

在你的控制器中

selected(value:any){
console.log('selected value',value);
}

下拉字段正在无限期地使用 API 调用函数

Dropdown field is calling the function with an API Call indefinitely

angular

typescript

angular-pipe