javascript - 如何订阅新帖子 - Angular
问题描述
我有这个 post-list.component.ts:
import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { Location } from '../post.model';
import { PostsService } from '../posts.service';
import { Subscription } from 'rxjs';
import { map } from 'rxjs/operators';
import { HttpClient } from '@angular/common/http';
@Component({
selector: 'app-post-list',
templateUrl: './post-list.component.html',
styleUrls: ['./post-list.component.css'],
})
export class PostListComponent implements OnInit, OnDestroy {
model: Location[] = [];
constructor(private http: HttpClient, public postsService: PostsService) {}
ngOnInit() {
// this.postsService.getPosts().subscribe((res) => {
// this.model = res;
// });
this.http.get<any>('http://localhost:8000/location').subscribe((res) => {
this.model = res.location;
});
//this.showPosts();
}
showPosts() {
this.postsService.getPosts().subscribe((res) => {
this.model = res.location;
});
console.log(
this.postsService.getPosts().subscribe((res) => {
this.model = res;
})
);
}
onShow(_token: string) {
var find = this.model.find(({ token }) => token === _token);
this.postsService.setLat(find.lat);
this.postsService.setLng(find.lng);
console.log(
this.postsService.getLat() + ' ' + this.postsService.getLng()
);
}
ngOnDestroy() {}
}
而这个 post-list.component.html
<mat-accordion multi="true" *ngIf="model.length > 0">
<mat-expansion-panel *ngFor="let post of model">
<mat-expansion-panel-header>
{{ post.token }}
</mat-expansion-panel-header>
<p>{{ post.lat }}</p>
<p>{{ post.lng }}</p>
<mat-action-row>
<button mat-raised-button color="accent" (click)="onShow(post.token)">
GET COORDS
</button>
</mat-action-row>
</mat-expansion-panel>
</mat-accordion>
<p class="info-text mat-body-1" *ngIf="model.length <= 0">No posts added yet</p>
问题是来自数据库的数据在没有页面刷新的情况下不会更新。问题是我在 ngOnInit() 方法上从 DB 获取数据,该方法仅在 init 上调用。如何修改 ngOnInit() 方法以订阅来自数据库的数据?
我尝试处理的 posts.service.ts 是:
import { Location } from './post.model';
import { Injectable } from '@angular/core';
import { Subject, Observable, Subscription, from } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
@Injectable({ providedIn: 'root' })
export class PostsService {
constructor(private http: HttpClient) {}
model: Location[] = [];
private lat;
private lng;
getPosts() {
return this.http.get<any>('http://localhost:8000/location');
}
setLat(lat) {
this.lat = lat;
}
setLng(lng) {
this.lng = lng;
}
getLat() {
return this.lat;
}
getLng() {
return this.lng;
}
}
但我没有得到任何工作结果。
谢谢你的时间!
解决方案
您可以在某个时间间隔(例如一秒)安排加载位置。
mySubscription: Subscription;
ngOnInit() {
this.mySubscription = interval(1000).subscribe(() => {
this.loadLocation();
});
}
loadLocation() {
this.http.get<any>('http://localhost:8000/location').subscribe((res) => {
this.model = res.location;
});
}
推荐阅读
- mysql - 如何使用 SQL 查询将多列数据放入同一个单元格?
- postgresql - 代码点火器向自定义查询添加“排序依据”
- jackson - 被 Karaf FeatureService.installFeatures() 覆盖的捆绑包
- r - 更改R中过滤的data.frame中一列中的所有值
- azure - 监视 Azure 事件中心分区队列大小的可用方法
- casting - 如何修复 SQL 错误 [306] [S0002]:text、ntext 和 image 数据类型无法比较或排序,除非使用 IS NULL 或 LIKE 运算符?
- c# - 按索引返回数字的方法
- firebase - 为具有异常字段的动态和静态节点创建 Firebase 规则
- appium - Appium / Python的云测试服务?
- matlab - Matlab:标准化后直方图下降?