时间戳

首页 > 解决方案 > 如何刷新数组以呈现 Angular？

angular - 如何刷新数组以呈现 Angular？

问题描述

我使用这个设置数组：

@Input() sogllist: any[] = [];

ngOnInit(): void {
    this.listService.setItems([...this.sogllist]);
}

在模板中显示的 Getter 是：

public get sogllistToRender() {
    return this.listService.getItems();
}

当用户从数组中删除一个数组时，我返回过滤后的数组，不包括已删除的元素：

public delete(sogl){
    this.listService.setItems([...this.sogllist.filter((s) => s.userid !== sogl.userid)]);
}

为什么模板不再渲染它：

 *ngFor="let sogl of sogllistToRender"

列表服务是：

@Injectable()
export class ListService {
    public onChanged = new Subject<any[]>();
    private items: any[] = [];

    getItems() {
        return this.items;
    }

    setItems(items: any): void {
        this.items = items;
    }

    setSelected(value: any): void {
        value.selected = !value.selected;
    }

    setSelectedState(value: any, state: boolean): void {
        value.selected = state;
    }

    drop(event: CdkDragDrop<string[]>) {
        moveItemInArray(this.items, event.previousIndex, event.currentIndex);
        return [...this.items];
    }

    emitChnages(): void {
        this.onChanged.next(this.items);
    }
}

最后的变化：

 ngOnInit(): void {
        // Set input array to service 
        this.listService.setItems([...this.sogllist]);

        // Get data from service and apply to local component variable
        this.sogllistToRender = this.listService.getItems();
    }

删除后更新当前数组：

 this.sogllistToRender = [...this.sogllist.filter((s) => s.userid !== sogl.userid)];

标签： angular

解决方案

Angular 将观察组件状态的变化，并在发生任何变化时重新渲染（这就是存在 ngOnChanges 生命周期的原因）。

然而，Angular 将只观察该组件的变化，而不是保持状态的某些服务。

因此，如果您想始终呈现数组的最后一个状态，请在组件中创建一个数组字段并更新它，而不是将数组保留在服务中。

如果状态必须在服务内部以便其他组件可以访问它，那么您可以在组件中创建另一个数组并从服务数组中加载它的值。

推荐阅读