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() {}
}

从'@angular/core'导入{Component，Input，OnInit，OnDestroy}；
从“../post.model”导入{Location}；
从“../posts.service”导入{PostsService}；
从“rxjs”导入{Subscription}；
从“rxjs/operators”导入{map}；
从'@angular/common/http'导入{HttpClient}；
@组成部分({
选择器：“应用程序发布列表”，
templateUrl:'./post list.component.html'，
样式URL:['./post list.component.css']，
})
导出类PostListComponent实现OnInit、OnDestroy{
型号：位置[]=[]；
构造函数（私有http:HttpClient，公共postsService:postsService）{}
恩戈尼尼特（）{
//this.postsService.getPosts（）.subscribe（（res）=>{
//this.model=res；
// });
this.http.get（'http://localhost:8000/location）。订阅（（res）=>{
this.model=res.location；
});
//this.showPosts（）；
}
展板（）{
this.postsService.getPosts（）.subscribe（（res）=>{
this.model=res.location；
});
console.log(
this.postsService.getPosts（）.subscribe（（res）=>{
this.model=res；
})
);
}
onShow（_标记：string）{
var find=this.model.find（（{token}）=>token===\u token）；
this.postsService.setLat（find.lat）；
此.postservice.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>

{{post.token}
{{post.lat}}

{{post.lng}}

获得合作
尚未添加帖子

问题是，如果没有页面刷新，来自数据库的数据不会更新。 问题是，我从数据库中获取的数据来自ngOnInit（）方法，该方法仅在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;
    }
}

从“/post.model”导入{Location}；
从“@angular/core”导入{Injectable}；
从“rxjs”导入{Subject，Observable，Subscription，from}；
从'@angular/common/http'导入{HttpClient}；
从“rxjs/operators”导入{map}；
@可注射（{providedIn:'root'}）
出口类邮政服务{
构造函数（私有http:HttpClient）{}
型号：位置[]=[]；
私人lat；
私人液化天然气；
getPosts（）{
返回此.http.get（'http://localhost:8000/location');
}
拉特（拉特）{
this.lat=lat；
}
液化天然气（lng）{
这是液化天然气=液化天然气；
}
getLat（）{
返回此.lat；
}
getLng（）{
归还此液化天然气；
}
}

但我没有得到任何工作成果

---

谢谢你的时间

您可以在特定的时间间隔（例如一秒钟）安排加载位置

mySubscription:Subscription；
恩戈尼尼特（）{
this.mySubscription=间隔（1000）.订阅（（）=>{
这个.loadLocation（）；
});
}
加载位置（）{
this.http.get（'http://localhost:8000/location）。订阅（（res）=>{
this.model=res.location；
});
}

您不能以这种方式订阅数据库。您需要轮询或使用信号器样式的机制将更新推送到客户端。即使这样，如果您的数据库被另一个应用程序修改，您也不会收到通知。http调用调用您的api以从数据库获取数据。它没有直接连接到它以获取更新。您需要依赖套接字通信，或者使用轮询来随时间进行额外的http调用您想“实时”查看数据库更改，而不刷新页面吗？使用CRUD操作是不可能的。有一次，我们必须做类似的事情，我们使用一个计时器作业（每20秒httpget一次）。@CirrusMinor这是个好主意，我将研究如何实现它。是的，这就是我想做的。谢谢你的主意@GérômeGrignon谢谢你的主意，先生，我会找的！这是正确的想法，但应该是

this.mySubscription=interval（1000）.pipe（map（（）=>this.http.get（）http://localhost:8000/location）。订阅（…）

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