尝试ngFor一个班级的班级

Question

我无法ngFor上一堂课：这是我正在从事的实时代码： https://stackblitz.com/edit/angular-62alpm?file=src%2Fapp%2Fshared.service.ts

@Injectable()
   export class Data{

   public data: types;
 }

@Injectable()
   export class types{

   public numb1: number;
   public numb2: number;
   public numb3: number;
   public numb4: number;
 }

代码：

//works
<div>
  {{_types.data.numb1}}
  {{_types.data.numb2}}
  {{_types.data.numb3}}
  {{_types.data.numb4}}
</div>

produce（使用ngfor的期望-在不更改类结构的情况下也需要相同的结果）

 2
 3
 5
 7

我在这里尝试用ngfor产生相同的东西...不起作用

<div *ngFor="let test of _types.data">
  {{test}}
</div>

Answer 1

为了使用ngFor遍历元素，您的元素必须是Array。我建议您通过以下方法更改类型类：

@Injectable()
   export class types{

   public numbers: Array<number> = [];
 }

然后在数字中推入4个数字（numb1，numb2，numb3，numb4）

然后您可以像这样迭代它：

<div *ngFor="let test of _types.data.numbers">
  {{test}}
</div>