首先，我要声明一下自己对 Angular 非常陌生，因为我正在尝试让简单的事情工作起来但却遇到了很大困难！

我有一个简单的 WebAPI，它将返回一个包含三个对象的 JSON 数组：

URL：https://localhost:44397/api/account

testListType.ts

export interface listTypes {
    limitTypeId: number;
    limitTypeText: string;
    limitTypeActive: boolean;
}

然后，我将 rxjs 加载到服务中

test.service.ts

import { Injectable } from '@angular/core';
import { listTypes } from '../models/testListType';
import { Observable, of } from 'rxjs';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { catchError, map, tap } from 'rxjs/operators';


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


  getlistTypes(): Observable<listTypes[]> {
    var returnable = this.http.get<listTypes[]>('https://localhost:44397/api/account');
    return returnable;
  }

  constructor(private http: HttpClient) { }
}

最后，尝试在组件上显示该返回的内容

testing.component.ts

import { Component, OnInit } from '@angular/core';
import { listTypes } from '../models/testListType';
import { TestService } from '../services/test.service';


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

  lists: listTypes[] = [];

  constructor(private testService: TestService) { }

  ngOnInit(): void {
    this.getListTypes();
  }

  getListTypes(): void {
    this.testService.getlistTypes()
        .subscribe(lists => this.lists = lists);
  }

}

这是根据我的要求修改 Angular 上的 Hero's of Ages 教程的结果。不幸的是，它什么都没显示，而且我太菜了，不明白如何调试订阅方法（我尝试过并得到了一个无意义的对象）。

当我尝试访问列表时，我在调试器中只能看到以下内容：

Uncaught ReferenceError: lists is not defined

毫无疑问，我错过了一个基本知识，我希望角度专家能在几秒钟内看到它，但我已经盯着它看了 2 个小时了！

任何帮助都很好。

更新 - 添加了组件 html

testing.component.html

<div *ngIf="testService.listTypes.length">

    <h2>Test</h2>
    <div *ngFor='let lists of testService.listTypes'> {{listTypes}} </div>
  
  </div>