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

【问题标题】：How to access my array of objects that I created with my constructor in Angular 7如何访问我在 Angular 7 中使用构造函数创建的对象数组
【发布时间】：2018-12-31 23:08:22
【问题描述】：

我对学习 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'.

【问题讨论】：

只需在您分配数组值的位置添加代码 - 从您的 html 中删除 this 关键字并尝试访问可能解决您的解决方案的数组
@rahul 我有 this 这个词的原因是因为正在我的服务组件中访问数据。
是的，但我认为这不适用于您的 html 和组件装饰器，如果您将 html 添加为 templateUrl，那么该 html 将成为您组件的一部分 - 所以html 将访问所有属性，而无需使用 this
@rahul 哦，好吧。你是对的。我删除了所有 this 关键字，我页面上的所有其他内容仍然正常工作。我没有意识到您在访问依赖注入器时不必指定 this。但是，我的数据仍然没有被迭代
请使用stackblitz.com。并在上面设置你的测试项目，以便轻松查看。

标签： angular typescript

【解决方案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[];

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

constructor(public weather: WeatherService) { }

我认为你已经完成了所有这些更改 - 希望它有效 - 快乐编码:)

【讨论】：

非常感谢！这正是我想要达到的目标。我不知道你可以像这样嵌套 ngFor 循环。另外，从经验丰富的开发人员的角度来看，我的其余代码总体上如何？我正在努力验证我走在正确的道路上，这样我才能找到一份工作。
是的，一切都很好——但我觉得你的代码耦合太紧密了——确保你的服务只提供数据——逻辑应该在你的组件中可用——因为你写的服务会如果您想在另一个组件中使用，则只为该组件提供任何更改可能会影响两者-您的代码应该是独立且单一职责的类-最后确保您具有所有属性的正确数据类型打字稿就是这样-我的一些想法如果我有什么不对的地方很抱歉
好的，谢谢！我想我理解你所说的一切，除了让我的代码“独立和单一职责的类”。如果我理解正确，您的意思是将代码分成彼此相关的较小部分，以便于维护和可扩展性，对吗？（据我了解，这是如何使用 Angular 的基本概念。）
是的 - 这就是我要说的 :) 快乐编码 :)

【解决方案2】：

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

ts 代码。

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

html 代码。

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

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

【讨论】：