我的 Angular 7 组件已连接到数据源，但未显示数据

Posted 2023-02-23

【中文标题】我的 Angular 7 组件已连接到数据源，但未显示数据

【英文标题】：My Angular 7 component is connected to a data source, but no data is displayed

【发布时间】：2019-12-22 06:00:22

【问题描述】：

我正在使用带有 Rails 5 后端的 Angular 7。我无法让我的前端显示存储在我的组件中的数据。这是我创建的共享服务，src/shared/currency.service.ts，

import  Injectable  from '@angular/core';
import  Http  from '@angular/http';
import  HttpClient  from '@angular/common/http';
import  Observable  from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class CurrencyService 
  constructor(private _http: HttpClient)  

  index() 
    return this._http.get('api/currencies').map(r => r);
  

  refresh() 
    return this._http.get('api/refresh').map(r => r);
  

这是我的 src/app/app.component.ts 文件...

import  CurrencyService  from './../shared/currency.service';
import  Component  from '@angular/core';

@Component(
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
)

export class AppComponent 
  currencies: any;
  title = 'app';
  apiStatus: string;
  constructor(private _currencySrv: CurrencyService)  

  ngOnInit() 
    this._currencySrv.index().subscribe(
      currencies => this.currencies = currencies);
  

  refresh() 
    this._currencySrv.refresh().subscribe(
      currencies => this.currencies = currencies);
  

我有这个作为我的 src/app/app.component.html 文件...

<!--The content below is only a placeholder and can be replaced.-->
<ul>
  <li ngFor="let currency of currencies">
    <div>currency.name</div>
    <div>currency.country</div>
    <div>currency.rate / 100</div>
  </li>
</ul>

<button (click)="refresh()">Refresh</button>

但尽管我可以看到我的开发工具网络面板使http://localhost:4200/api/currencies 调用返回数据，但当我访问http://localhost:4200 时，我的页面上没有任何视觉显示（除了一个点）。我做错了什么？

【参考方案1】：

我认为您在控制台中有一个错误，上面写着“无法读取未定义的'名称'”。那是因为您试图在获取数据之前呈现列表。将您的列表包装到 <ng-container *ngIf="currencies?.length"> 应该会有所帮助。或者在模板中使用异步管道。链接到文档https://angular.io/api/common/AsyncPipe

或者可以将currencies的初始值设置为空数组[]

注意：使用any 不是一个好习惯，尽量避免使用它，这样更安全，您可以更好地控制变量。

【讨论】：

谢谢。我对此有点陌生，所以我首先想尝试你的最简单的建议——我改变了“货币：任何；”到“货币 = [];”但是这一行，“ this._currencySrv.index().subscribe(currencies => this.currencies = currency);”产生错误，“错误 TS2322：类型 'Object' 不可分配给类型 'any[]'”

这意味着 index() 方法返回一个对象而不是数组