Question

我对Angular的学习还很陌生，我还没有完全了解所有内容，因此请耐心等待。我创建了一个对象数组，其中包含我需要的所有数据，并尝试使用ngFor指令显示数据。我知道数据在那里，因为我通过控制台注销了它，但是我不知道如何使用ngFor循环访问数据。

这是控制台记录的数据console.log（this.forecastData）;

[HighLows]
0: HighLows {days: Array(6), highs: Array(6), lows: Array(6)}
length: 1
__proto__: Array(0)

这是我的html

<div *ngFor="let data of this.weather.forecastHiLoData">
  {{data.days}}
  {{data.highs}}
  {{data.lows}}
</div>

我尝试了不同的情况，这些情况只会给我类似错误

<div *ngFor="let data of this.weather.forecastHiLoData[0]">

或

  {{data[0].days}}

也许这就是我构造新对象的方式。当我控制台注销HighLows数组到第零个索引console.log（this.forecastData [0]）时，我得到的就是这个

HighLows {days: Array(6), highs: Array(6), lows: Array(6)}
days: (6) [1546225200000, 1546236000000, 1546322400000, 1546408800000, 1546495200000, 1546581600000]
highs: (6) [4.56, 13.95, 2.75, -0.24, 9.14, 13.93]
lows: (6) [4.56, 3.73, -1.44, -6.73, -8.73, -5.08]
__proto__: Object

https://stackblitz.com/edit/angular-wtu3ym?file=src%2Fapp%2Fapp.component.html

更新

好像我在终端中遇到了错误，我将不得不研究直到现在才意识到的问题。我仍在学习如何使用类/接口和构造函数。

ERROR in src/app/services/weather.service.ts(39,5): error TS2322: Type 'any[]' is not assignable to type 'HighLows'.
  Property 'days' is missing in type 'any[]'.
src/app/services/weather.service.ts(40,20): error TS2345: Argument of type 'Days[]' is not assignable to parameter of type 'number[]'.
  Type 'Days' is not assignable to type 'number'.
src/app/services/weather.service.ts(150,32): error TS2345: Argument of type 'number' is not assignable to parameter of type 'Days'.

Answer 1

我看过您的Stackblitz，并在代码中发现了一些问题-似乎您正在尝试打印一个数组weather.forecastHiLoData，其中包含多个数组，您需要遍历所有数组以获取值

尝试这样的事情

<div *ngFor="let day of weather.forecastHiLoData">
  <div *ngFor="let item of day.days">
    Days: {{item}}
  </div>
  <div *ngFor="let high of day.highs">
    Highs: {{high}}
  </div>
  <div *ngFor="let low of day.lows">
    Lows: {{low}}
  </div>
</div>

当我像上面那样循环数组时，我可以读取所有值-而我在interface和services中做了一些更改

HighLow.ts

import {Days} from './days';
import {Lows}from  './lows';
import {Highs}from './highs';

export class HighLows {
  days: Days[];
  highs:Highs[];
  lows: Lows[];

  constructor(days: Days[], highs: Highs[], lows: Lows[]) {
    this.days = days;
    this.highs = highs;
    this.lows = lows;
  }
}

Weather.service.ts

您的forecastHiLoData应该是HighLows[]的数组，并且应该读为

public forecastHiLoData: HighLows[];

最后，我不确定您是否可以在private上读取html变量，因此请确保将其命名为public-因此您的天气服务注入应该是公开的

constructor(public weather: WeatherService) { }

有了所有这些更改，我想您已经完成了-希望它能工作-祝您编程愉快：）

Answer 2

看到了您的stackblits代码。不幸的是* ngFor的工作方式不同。

ts代码。

items = [
 "a", "b", "c", "d"
]

html代码。

<ul>
  <li *ngFor=”let item of items”>{{ item }}</li>
</ul>

用通俗易懂的话来说，您需要在构造函数上方创建一个局部变量，在HTML文件中循环访问该局部变量以获取其中的内容。（您也可以创建可观测对象，并通过异步管道订阅它们，但目前您可以忽略它）希望这会有所帮助

如何访问我在Angular 7中使用构造函数创建的对象数组

2 个答案: