让我们考虑一下我们的数据库中有3个州.

  1. 佛罗里达州
  2. 德克萨斯州
  3. 蒙大拿州

我有一个名为创建模板的按钮.当我点击它时,在浏览器的右侧打开一个面板.在该面板的ngOnInit()个上,我找到来自后端的状态,并使用以下代码显示所有状态.

create-template-types.component.html

<ng-select
  formControlName="state"
>
  <ng-option
    *ngFor="let state of states"
    [value]="state?.name"
    >{{ state?.name }}
  </ng-option>
</ng-select>

create-template-types.component.ts

ngOnInit(): void {
    this.stateSubscription = this.locationService
      .find全States()
      .subscribe((states: State[]) => {
        this.states = states;
        this.states?.sort((s1, s2) => (s1?.name < s2?.name ? -1 : 1));
        this.states.unshift({ code: 'ALL', name: '全' });
      });
  }

ngOnDestroy(): void {
  this.stateSubscription?.unsubscribe();
}

如果我打开模式一次,它显示这是正确的和预期的.

  1. 佛罗里达州
  2. 蒙大拿州
  3. 德克萨斯州

但如果我关闭并再次打开模式(不刷新页面),它会显示 2次.

  1. 佛罗里达州
  2. 蒙大拿州
  3. 德克萨斯州

同样,如果我关闭并再次打开模式,将显示3次.我想知道为什么会发生这种情况,因为每次调用stateSubscription时都会分配this.states.


我试过:

在为其分配新值之前清除了this.statesarray.在ngOnInit方法的开头添加了this.states = [];.但这并不管用.如果有人能帮上忙就太好了.提前谢谢你

Edit:

我试图放置一个调试指针.当我打开模式时,this.states总是空的.那为什么要加两次、三次ALL呢?

enter image description here

推荐答案

可能LocationService在每次订阅时都发出具有相同引用的array.这意味着在第一次执行时,将在源数组上添加"all".

避免这种情况的一个好方法是创建一个副本.一种方法是在源数组上使用扩散运算符.

this.stateSubscription = this.locationService
  .findAllStates()
  .subscribe((states: State[]) => {
    this.states = [
      { code: "ALL", name: "All" },
      ...states.sort((s1, s2) => (s1?.name < s2?.name ? -1 : 1)),
    ];
  });

Angular相关问答推荐

在Angular 多选下拉菜单中实现CDK拖放排序的问题

Rxjs重置执行后的可观察延迟并重新调度Angular

是否自动处理Angular /RxJS观测数据的取消订阅

ANGLING HTTP.GET()返回包含数据的数组

我正在try 将一个带有模块联盟的Angular 8项目expose 到另一个Angular 项目,Angular 是15,这可能吗?如果是这样,有什么建议吗?

我应该对我想要在我的Angular 17+组件中显示的任何变量使用信号吗?

无法使用@ngrx/component-store 在其他组件中获取状态更改值

Renderer2.appendChild 没有按预期工作?

无法获得 angular-material md-sidenav 的 100% 高度

在 Angular2 中跟踪 Google Analytics 页面浏览量

等待多个promises完成

无法从模块it was neither declared nor imported导出服务

angular 2 http withCredentials

移除 Angular 组件创建的宿主 HTML 元素 Select 器

Angular 2 setinterval() 继续在其他组件上运行

没有 ChildrenOutletContexts 的提供者 (injectionError)

单元测试错误:无法从同步测试中调用 Promise.then

Angular 4 material表突出显示一行

如何在 Angular CLI 的构建时插入内部版本号或时间戳

Angular CLI 为已经存在的组件创建 .spec 文件