Question

您好，我正在学习Angular 7，但在某些时候遇到了困难。我有一个Fake Rest API（GET），我正在使用此api在我的组件中获取用户数据，并最终在我的HTML页面中绑定此数据，但似乎HTML中没有可用的数据，但我正在Component中接收数据。我有三个文件： 1. Component.service 2. Component.ts 3. Component.html

我已经尝试在ngOnIt方法中调用GetAllAppData，但没有在组件中接收到成功数据，但未在HTML中填充

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})

export class HomeService {
    url1 = 'http://dummy.restapiexample.com/api/v1/employees';

    constructor(private httpClient: HttpClient){

    }



    public getAll(){

        return this.httpClient.get<any[]>(`${this.url1}`);
    }


}

import { Component } from '@angular/core';
import { Router }  from '@angular/router';  
import { FormsModule } from '@angular/forms';
import {HomeService} from './home.service';


@Component({
  templateUrl:'./home.component.html' ,
  styleUrls: ['./home.component.less'],
  providers : [HomeService]
})
export class HomePageComponent{

    policies:any = [];
    constructor(private homeService:HomeService){

    }

    public GetAllAppData(){
        this.homeService.getAll().subscribe(function(resp){
               if(resp){
                this.policies =resp;
                console.log(this.policies);
                }
        })
    }

    ngAfterViewInit() {
    this.GetAllAppData()
    }
    ngOnInit() {

    }

}

<div class="row col-md-12 col-xs-12">
    <div class="panel">
            <div class="panel-body">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Organisation</th>
                            <th>Total Users</th>
                            <th>Subscribed Users</th>
                        </tr>
                    </thead>
                    <tbody *ngIf="policies.length>0">
                        <tr *ngFor="let comment of policies">
                            <td> 
{{comment.employee_age}}</td>
                            <td>{{comment.employee_age}}</td>
                            <td>{{comment.employee_age}}</td>
                            <td>{{comment.employee_age}}</td>
                        </tr>

                    </tbody>
                </table>
            </div>


    </div>
</div>

Answer 1

如果使用箭头功能会怎样？

from PySide2 import QtGui, QtCore, QtWidgets


class Widget(QtWidgets.QWidget):
    def __init__(self, parent=None):
        super(Widget, self).__init__(parent)
        self.setWindowFlags(self.windowFlags() | QtCore.Qt.FramelessWindowHint)

    def paintEvent(self, event):
        painter = QtGui.QPainter(self)
        pen = QtGui.QPen(QtGui.QColor(255, 1, 1))
        painter.setPen(pen)
        width = pen.width()
        rect = self.rect().adjusted(0, -width, -width, -width)
        painter.drawRect(rect)


if __name__ == "__main__":
    import sys

    app = QtWidgets.QApplication(sys.argv)
    w = Widget()
    w.resize(550, 407)
    w.show()
    sys.exit(app.exec_())

成为

function(resp){
           if(resp){
            this.policies =resp;
            console.log(this.policies);
            }
    }

如何在Angular 7中使用RESTAPI在模板中绑定JSON

1 个答案: