代码之家 › 专栏 › 技术社区 › Joe Flynn

带*的角度视图,用于不渲染数据[重复]

arrow-functions lambda angular javascript

0

Joe Flynn · 技术社区 · 7 年前

我不熟悉Angular,但熟悉Javascript。

我正在为一个演示设置一个CRUD,不能让这个列表循环从我们的API返回的数据。

数据加载很好,我可以在控制台看到。但是 *ngFor <li> s。

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

就像我说的,数据显示在控制台中,所以我认为它一定在视图中。

3 回复 | 直到 7 年前

1

0

Joe Flynn 7 年前

毕竟是在TS里。

我的 getPages 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);
}

2

0

Sumit Vekariya 7 年前

试试这个:

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

3

0

brk 7 年前

问题出在 subscribe 回调的上下文 this 是不同的。所以你可以使用箭头函数或者 bind &传递上下文

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