在Angular中使用NgRx管理状态时,你可能需要在将对象放入下拉列表之前检查对象中是否有空字段
// selectors.ts
import { createSelector } from '@ngrx/store';
import { AppState } from '../state/app.state';
export const selectItems = createSelector(
(state: AppState) => state.items,
(items) => items.filter(item => !hasEmptyFields(item))
);
function hasEmptyFields(obj: any): boolean {
return Object.values(obj).some(value => value === null || value === undefined || value === '');
}
Store
服务的select
方法来获取过滤后的对象数组。// my-component.component.ts
import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import { selectItems } from './selectors';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
items$: Observable<any[]>;
constructor(private store: Store) {}
ngOnInit(): void {
this.items$ = this.store.select(selectItems);
}
}
*ngFor
指令来遍历过滤后的对象数组,并将它们显示在下拉列表中。<!-- my-component.component.html -->
<select>
<option *ngFor="let item of items$ | async" [value]="item.id">{{ item.name }}</option>
</select>
这样,下拉列表中将只显示那些没有空字段的对象。hasEmptyFields
函数可以根据你的需求进行修改,以便检查对象中的特定字段或执行其他验证。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云