Question

我想从nodejs中获取一些数据到angular并将其在网页上列出。

我尝试执行此操作，但没有得到答案（网页空白，没有错误）

这是post.model：

export interface Post {
    id: string;
    token: string;
    lat: String;
    lng: String;
}

我正在使用的JSON（来自数据库）：

{
    "location": [
        {
            "_id": "5f3429f9fe89ef3658c5ec17",
            "lat": "44.4363255",
            "lng": "25.9912393",
            "token": "edb153fb9d8d5628",
            "__v": 0
        },
        {
            "_id": "5f342fbadae3a42884852505",
            "lat": "44.4363228",
            "lng": "25.9912314",
            "token": "c30af1934c22f4eb",
            "__v": 0
        }
    ]
}

post-list.component：

export class PostListComponent implements OnInit, OnDestroy {
    posts: Post[] = [];
    private postsSub: Subscription;

    constructor(public postsService: PostsService) {
        //dependency-injection
    }
    ngOnInit() {
        this.postsService.getPosts();
        this.postsSub = this.postsService
            .getPostUpdateListener()
            .subscribe((posts: Post[]) => {
                this.posts = posts;
            });
    }

    onShow() {
        console.log('TODO');
    }

    ngOnDestroy() {
        this.postsSub.unsubscribe();
    }

post-list.component.html：

<mat-accordion multi="true" *ngIf="posts.length > 0">
    <mat-expansion-panel *ngFor="let post of posts">
        <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.id)">
                SHOW
            </button>
        </mat-action-row>
    </mat-expansion-panel>
</mat-accordion>
<p class="info-text mat-body-1" *ngIf="posts.length <= 0">No posts added yet</p>

，还有post.service：

export class PostsService {
    private posts: Post[] = [];
    private postsUpdated = new Subject<Post[]>();

    constructor(private http: HttpClient) {}

    getPosts() {
        this.http
            .get<{ posts: any[] }>('127.0.0.1:8000/location')
            .pipe(
                map((postData) => {
                    return postData.posts.map((post) => {
                        return {
                            id: post._id,
                            token: post.token,
                            lat: post.lat,
                            lng: post.lng,
                        };
                    });
                })
            )
            .subscribe((transformedPosts) => {
                this.posts = transformedPosts;
                this.postsUpdated.next([...this.posts]);
            });
    }

    getPostUpdateListener() {
        return this.postsUpdated.asObservable();
    }

基本上，我正在从android应用程序检索一些数据，并使用nodejs将其保存在mongodb数据库中。我的项目的下一步是在网页上列出数据库中的数据。

我试图通过getPosts（）方法获取数据（请参阅post.service），然后将其列出。正如我告诉你的，网页上什么也没有显示。

app.component.html很简单，我只是调用来显示地图（稍后我将在地图上显示一些坐标）和，后者应该显示数据库中的数据。

如果我删除了<app-post-list></app-post-list>，则该网页将显示一个google map，因此其余代码仍在工作，但是当我添加<app-post-list></app-post-list>时，它将不再显示任何内容。有什么想法吗？

---编辑

我解决了“什么都没出现的问题”。现在，无法显示数据：尚未添加帖子

this is the developer console log:

Answer 1

从您的最后一条评论中，我认为您只是忘记了在AppModule中导入HttpClientModule。

确保将架构“ http：//”添加到目标网址，如下所示：

        .get<{ posts: any[] }>('http://127.0.0.1:8000/location')

如果您不这样做，Angular只会将其解释为http：// localhost：4200 / 127.0.0.1 / location

从NodeJ到Angular获取数据

1 个答案: