时间戳

首页 > 解决方案 > 加载和接收服务器响应后刷新元素

angular - 加载和接收服务器响应后刷新元素

问题描述

此元素应在服务器响应后更新div(*ngIf='IAmThatElement | async')

零件

public IAmThatElement: boolean = false;

constructor(private returnAliveService: ReturnAliveService) {}

ngOnInit() {
    this.calledWhenPageLoaded
}

//Not sure why there is a get. If the element is linked, should updating it not get reflected on view
get calledWhenPageLoaded() {
    this.returnAliveService.getServerHealth()
        .subscribe(data => {
            this.IAmThatElement = data.resut;
        }, error => {
            this.IAmThatElement = false;
        });

    return this.IAmThatElement;
}

服务

@Injectable()
export class ReturnAliveService {

    constructor(private http: HttpClient) {
    }

    getServerHealth() : Observable<Data> {
        return this.http.get<Data>('URL');
    }
}

我应该如何更新IAmThatElement。新手到Angular。发现类似的东西https://stackoverflow.com/a/58652468仍然不适合我。非常感谢帮助

---- 更新为Observable。不确定这是否有效，也不知道如何在更新后在视图中显示布尔值

public IAmThatElement: Observable<boolean> = new Observable<boolean>();

constructor(private returnAliveService: ReturnAliveService) {}

ngOnInit() {
    this.returnAliveService.getServerHealth()
        .subscribe(
            data => {
                //No idea on how to populate IAmThatElement with data and display content on view
                this.IAmThatElement = Observable.create(true);
            }
        );
}

标签： angular

解决方案

在您的代码中需要考虑两件事：

1.-我不知道为什么有一个getbeforecalledWhenPageLoaded方法。我会删除它。

2.- 这是重要的：您已IAmThatElement在组件中声明为布尔值，但在模板中绑定它时，您使用的是async管道，这意味着您订阅了一个可观察对象，这是不正确的。所以你有两个选择：

  • | async从模板中移除管道。
  • 声明IAmThatElement为可观察对象（例如 BehaviourSubject）并在calledWhenPageLoaded方法中更改其值。

另请注意，IAmThatElement在calledWhenPageLoaded方法中返回无效。

例如：

import {BehaviorSubject} from 'rxjs';

public IAmThatElement: BehaviorSubject<boolean> = new BehaviorSubject(false);

constructor(private returnAliveService: ReturnAliveService) {}

ngOnInit() {
    this.returnAliveService.getServerHealth()
        .subscribe(
            data => {                 
            this.IAmThatElement.next(data.result); // I suppose `data.result` is a true value here
        }, error => {
            this.IAmThatElement.next(false);
        });
            }
        );
}

推荐阅读