Question

我知道这是一个简单的问题，但是由于某些原因，我无法在Angular 6 HTML模板中显示一条数据。

不是将所有数据都添加到checkTime吗？我尝试将checkTime设置为数组，因为数据可能会以长度等于1的数组格式输入。采用这种方法时，我也做了整个 * ngFor ，但没有用。

这是数据来自我在服务中调用的API的方式：

[
    {
        "CheckTimes": 1
    }
]

这是我所有的代码：

HTML模板：

<p>{{ checkTime.result }}</p>

组件

import { Component, OnInit } from '@angular/core';
import { VerificationService, Verification } from '../verification.service'

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

  checkTime: Verification;

  constructor(
    public verificationService: VerificationService
  ) { 
    this.getTimeVerification();
  }

  getTimeVerification(){
    this.verificationService.getTimeVerification().subscribe(
      data => {
        this.checkTime = data
        console.log(data)
      },
      error => {
        alert("Could not retrieve time verification")
      }
    )
  }

服务

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

export interface Verification {
  result: number;
}

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

  baseUrl = environment.baseUrl;

  constructor(
    public http: HttpClient
  ) { }

  getTimeVerification(){
    let url = this.baseUrl + '/api/verify_times';
    return this.http.get<Verification>(url);
  }

}

Answer 1

我建议不要在构造函数中调用getTimeVerification，而应在ngOnInit中调用。构造函数为时过早。

无法获取要在Angular HTML模板上显示的变量

1 个答案: