Angular

Question

logdetay.service.ts

import { Injectable } from '@angular/core';
import { Logdetay } from './logdetay.model';
import { HttpClient } from "@angular/common/http";

@Injectable({
  providedIn: 'root'
})
export class LogdetayService {

  formData:Logdetay={
    Message: null,
    CreateDate: null,
    LogType: null,
    Int: null


  };

  readonly rootUrl='https://localhost:44370/api';
  list : Logdetay[];
  constructor(private httpclient:HttpClient) { }

  postlogDetay(formData:Logdetay){
    return this.httpclient.post(this.rootUrl+'/Logtbs',formData);

  }
  refreshList()
  {
    this.httpclient.get(this.rootUrl + '/Logtbs')
    .toPromise()
    .then(res => this.list = res as Logdetay[]);   
  }
}

logdetay-liste.component.html

<table class="table table-hover">
    <tr *ngFor="let pd of service.list">
      <td >{{pd.Message}}</td>
      <td >{{pd.Logtype}}</td>

    </tr>
</table>

logdetay-liste.component.ts

import { Component, OnInit } from '@angular/core';
import { Logdetay } from 'src/app/paylas/logdetay.model';
import { LogdetayService } from 'src/app/paylas/logdetay.service';
import { HttpClient } from "@angular/common/http";

@Component({
  selector: 'app-logdetay-liste',
  templateUrl: './logdetay-liste.component.html',
  styles: []
})
export class LogdetayListeComponent implements OnInit {


  constructor(private service : LogdetayService) {  }
  ngOnInit() {

     this.service.refreshList();



  }


}

输出： this.service.refreshList();在logdetay-list.component.ts值来undefined.

我正在尝试通过网络获取信息 API。我能够插入。如何在页面上显示数值？

Answer 1

问题

第 1 期:

正如@Tonbul 在评论中提到的，您正在访问HTML 组件中的service，它是private变量.

<tr *ngFor="let pd of service.list">
  ...
</tr>

第 2 期:

您正在 从 LogdetayService 访问 list，即 private。默认情况下，未指定任何访问类型的变量将设置为 private.

export class LogdetayService {
    list : Logdetay[];

    ...
}

解决方案

解决方案 1：将变量声明为 public

1.1 设置 service 为 public

logdetay-liste.component.ts

export class LogdetayListeComponent implements OnInit {
  constructor(public service : LogdetayService) {  }
}

1.2 设置 list 为 public

logdetay.service.ts

export class LogdetayService {
    public list : Logdetay[];

    ...
}

Sample Solution 1 on StackBlitz

解决方案 2：Return 结果为 Observable<Logdetay[]>

2.1 Return 作为 Observable<Logdetay[]>

logdetay.service.ts

import { Observable } from 'rxjs';

export class LogdetayService {

refreshList(): Observable<Logdetay[]> {
    return this.httpclient
       .get<Logdetay[]>(this.rootUrl + '/Logtbs');
  }
}

2.2 声明 list 变量并在 subscribe event 中从 Observable

赋值

logdetay-liste.component.ts

import { Logdetay } from '../paylas/logdetay.model';

export class LogdetayListeComponent implements OnInit {
  list: Logdetay[];

  constructor(private service: LogdetayService) {}
  ngOnInit() {
    this.service.refreshList().subscribe(res => (this.list = res));
  }
}

2.3 将 service.list 替换为 list

logdetay-liste.component.html

<tr *ngFor="let pd of list">
    ...
</tr>

Sample Solution 2 on StackBlitz

Angular - 从服务中获取未定义

Angular - Get undefined from service

typescript

angular-services

问题

解决方案