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

此元素应在服务器响应后更新

div（*ngIf='iamthaelement | 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');
    }
}

---

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

1.-我不知道为什么在

调用HenpageLoaded

方法之前有一个

get

。我会把它拿走

2.-这是一个重要的问题：您在组件中将

iamthaelement

声明为布尔值，但在模板中绑定它时，您使用的是

async

管道，这意味着您订阅的是一个可观察对象，而这不是真的。所以你有两个选择：

• 从模板中删除

  | async

  管道
• 将

  iamthaelement

  声明为可观察对象（例如行为主体），并在

  调用的HenpageLoaded

  方法中更改其值

还请注意，在

调用的HenpageLoaded

方法中返回

iamthaelement

无效

例如：

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);
        });
            }
        );
}

从'rxjs'导入{BehaviorSubject}；
public IAmThatElement:BehaviorSubject=新的BehaviorSubject（false）；
构造函数（私有returnAliveService:returnAliveService）{}
恩戈尼尼特（）{
this.returnAliveService.getServerHealth（）
.订阅(
数据=>{
this.iamthaelement.next（data.result）；//我想这里的'data.result'是一个真值
}，错误=>{
this.iamthaelement.next（false）；
});
}
);
}

我已经更新了代码。有两个地方我被卡住了。写入

Observable

并显示

Observable

中的数据，我添加了一个使用

BehaviorSubject

的示例，上面的代码仅在“iamthaelement | async”被添加回时有效。否则它不会刷新。据我所知，

iamthaelement

未订阅。通过添加

| async

，可以强制订阅。如果我错了，请纠正我。是的，当然，正如我在帖子中所说的那样，

async

管道用于订阅观测值。您将代码更改为使用可观察的，因此需要使用

async

管道。

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);
        });
            }
        );
}