让我们考虑一下我们的数据库中有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();
}
如果我打开模式一次,它显示这是正确的和预期的.
- 全
- 佛罗里达州
- 蒙大拿州
- 德克萨斯州
但如果我关闭并再次打开模式(不刷新页面),它会显示全 2次.
- 全
- 全
- 佛罗里达州
- 蒙大拿州
- 德克萨斯州
同样,如果我关闭并再次打开模式,全将显示3次.我想知道为什么会发生这种情况,因为每次调用stateSubscription
时都会分配this.states
.
我试过:
在为其分配新值之前清除了this.states
array.在ngOnInit
方法的开头添加了this.states = [];
.但这并不管用.如果有人能帮上忙就太好了.提前谢谢你
Edit:个
我试图放置一个调试指针.当我打开模式时,this.states
总是空的.那为什么要加两次、三次ALL呢?