Question

所以我在我的MEAN-stack应用程序中的一个论坛上工作，我从node.js后端请求了部分。我能够从后端收到我想要的内容，但是当我想显示我检索到的4个部分时，我无法在屏幕上显示这些行。我在我的子论坛上做了相同的机制，它似乎在那里工作，但我不知道是什么让它不起作用。

我的论坛模板（forum.component.html）

<div class="row justify-content-center mb-3 mt-5">
    <div class="col-md-8">
        <table class="table">
            <thead>
            <tr>
                <th>Forum</th>
                <th>Posts</th>
                <th>Replies</th>
                <th>Last Post</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let section of sections" [routerLink]="section.name">
                <td>
                    <p><b>{{section.name}}</b></p>
                    <p>For all general topics of Wizards Unite.<br> Ask a question or open a topic te contribute to the community.</p>
                </td>
                <td>{{section.posts.length}}</td>
                <td>{{section.totalReplies}}</td>
                <td>
                    <p>{{section.lastPost.title}}</p>
                    <p>by {{section.lastPost.name}} on {{section.lastPost.date | amDateFormat:'LL'}}</p>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="col-md-2 side-column">

    </div>
</div>

我的论坛组件（forum.component.ts）

import {Component, OnInit} from "@angular/core";
import {ForumService} from "./forum.service";
import {ActivatedRoute} from "@angular/router";

@Component({
    selector: 'forum',
    templateUrl: 'forum.component.html',
    styleUrls: [
        'forum.component.css'
    ]
})

export class ForumComponent implements OnInit {

    sections = [];

    constructor(private forumService: ForumService, private route: ActivatedRoute){}

    ngOnInit(){

            this.forumService.getSections()
                .subscribe(function (sections:any) {
                    this.sections = sections.obj;
                    console.log(this.sections);
                })

    }
}

这是我从组件中的getSections（）函数收到的数据。乍一看，一切都是我想要的，但正如你所看到的那样，行不会出现在屏幕的左侧*

Answer 1

调用回调函数时，this的上下文通常会发生变化。

在您的示例中，this不再引用该类，因此它不会像您期望的那样设置sections。

将function (sections:any)更改为(sections:any) =>。通过使用箭头函数，它应该保留其上下文

ngFor没有处理元素

1 个答案: