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

问题描述 投票:0回答:1

此元素应在服务器响应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');
    }
}

我应该如何更新IAmThatElementAngular的新手。发现类似的内容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个回答
1
投票

您的代码中有两件事要考虑:

1.-我不知道为什么get方法之前有calledWhenPageLoaded。我将其删除。

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);
        });
            }
        );
}
© www.soinside.com 2019 - 2024. All rights reserved.