Question

我是Angular的新手，但是熟悉Javascript。

我正在为演示设置CRUD，但无法获取此列表来循环从API返回的数据。

数据加载正常，我可以在控制台中看到它。但是下面的*ngFor不会呈现任何<li>。

pages.component.html：

<div class="row">
    <div class="col-sm-4">
        <p>Pages</p>
        <ul>
            <li *ngFor="let page of pages">
                {{page.Name}}
            </li>
            <li>this shows up.</li>
        </ul>
    </div>
</div>

pages.component.ts：

import { Component, OnInit } from '@angular/core';
import { PageService } from '../page.service';
import { Page } from '../page';

@Component({
  selector: 'app-pages',
  templateUrl: './pages.component.html',
  styleUrls: ['./pages.component.css']
})
export class PagesComponent implements OnInit {
    pages: Page[];

    getPages(): void {
        this.pageService.all().subscribe(function(pages) {
            console.log(pages);
            this.pages = pages;
        }
    }

    constructor(private pageService: PageService) { }

    ngOnInit() {
        this.getPages();
    }
}

就像我说的那样，数据显示在控制台中，所以我认为它必须在视图中。

Answer 1

毕竟是在TS中。

我的getPages函数使用的是lambda而不是箭头函数。我认为它们在语义上是相同的。但是lambda未正确绑定到this。

因此，当我写到this.pages时，它并没有保存到组件的pages成员中，而是保存到了匿名函数本身中。

getPages(): void {
    this.pageService.all().subscribe(function(pages) {
        this.pages = pages;
    }
}

应该是这样：

getPages(): void {
    this.pageService.all().subscribe(pages => this.pages = pages);
}

Answer 2

尝试一下：

在ts文件中：

getPagesFromView() {
    If (this.pages.length > 0) {
        return this.pages;
    }
}

Answer 3

问题出在subscribe回调内部，this的上下文不同。因此，您可以使用箭头函数或bind并传递其上下文

getPages(): void {
        this.pageService.all().subscribe(function(pages) {
            console.log(pages);
            this.pages = pages;
        }.bind(this))
    }

带* ngFor的角度视图不渲染数据

3 个答案: