Angular 5 循环数组答案

【问题标题】：Angular 5 loop arrayAngular 5 循环数组
【发布时间】：2018-10-27 17:45:38
【问题描述】：

我真的是角度离子和其他东西的初学者。在这里，我的问题是我尝试使用 *ngFor 迭代 someArr 并传递给 [something]="" 但添加后我的页面变为空白。谁能帮帮我。

someArr = [1, 2, 3, 4, 5, 6]

<ion-content>

  <myHeader *ngIf="qArr.length && qArr[cPg].letter === 'A'" [something]="">
  </myHeader>

  <myHeader *ngIf="qArr.length && qArr[cPg].letter === 'B'" [something]="">
  </myHeader>

</ion-content>

【问题讨论】：

如果您的页面为空白，则 myHeader 组件未通过 ngif 检查。什么是 qArr？我们能看到吗？
qArr 是一个数组，qArr = [{"name": "Abu"}, {"origin": "Pakistan"}, ...]
我已经尝试过使用 ng-container 也没有用
我假设 myHeader 是您创建的自定义组件。我们能看到那个组件吗？
您能否编辑您的问题并解释您要完成的工作？这将有助于我们解释解决方案或推荐更有效的方法。

标签： arrays angular typescript ngfor

【解决方案1】：

您能展示一下您对 ngFor 的尝试吗？应该是这样的

<div *ngFor="let val of someArr">
  {{val}}
</div>

旁注，你不能在同一个标签内组合 ngFor 和 ngIf 这意味着这不起作用

<div *ngFor="let val of someArr" *ngIf="val === 1">
  {{val}}
</div>

但这会起作用

<div *ngFor="let val of someArr">
  <div *ngIf="val === 1">
  {{val}}
  </div>
</div>

更新

something 不是真正的属性，所以我们不知道您指的是什么。但是，您应该能够为属性分配值。以id 属性为例

<div *ngFor="let val of someArr">
  <div  [id]="val">
  {{val}}
  </div>
</div>

【讨论】：

我添加了 *ngFor="let s of someArr" 和 [something]="s"。我想在 [something] 中传递 1 2 3 4 5 6
感谢您的帮助。我会尝试将双引号更改为 {}
@noorayu，应该可以，还有其他问题（没有双关语）
我已经更改了一些内容以使其更有意义。如果我不使用 div 可以吗，我使用了我的组件 myHeader
应该没问题的。

【解决方案2】：

使用 ngFor 时，您正在基于类变量创建局部变量，因此您将拥有类似的内容：

<div *ngFor="let item of someArr"></div>

其中 someArr 是类 var = [1, 2, 3, 4, 5, 6]

因此，在您的 div 中，您将可以使用以下方式访问每个项目：

<div *ngFor="let item of someArr">
   <p *ngIf="item === myFunction(item)"> {{ item }} </p>
</div>

【讨论】：