Question

我有几个* ngFor循环，取决于可能尚未实例化的迭代。（例如，他们正在等待观察）

是否有任何我可以在视图中使用的表达式？

更新：这是投掷错误的部分

组件

spark.sql.parquet.int96AsTimestamp

查看

activeLectureContent:LectureContent;

无法在[null]

中读取未定义的属性“内容”

讲座内容如下所示

  <div class="filter-units">
    <div>Units</div>
    <a (click)="setUnit(i)" class="btn btn-icon-only blue filter-unit-btn" *ngFor="#unit of activeLectureContent.content; #i = index">
      <span>{{i+1}}</span>
    </a>
  </div>

欢呼声

Answer 1

您可以使用ngIf指令，因此仅在iterable无效时才会呈现。

<div *ngIf="iterable" *ngFor="let item of iterable"><div>

Answer 2

如果它＆＃34;简单地＆＃34;一个可迭代的（数组，......但不是可观察的，承诺），我认为没有什么可做的。 ngFor将检查迭代的更新。当值变为非空时，ngFor将更新相应的内容：

请参阅此示例：

@Component({
  selector: 'app'
  template: `
    <div>
      <div *ngFor="#category of categories;#i=index">{{i}} - {{category.name}}</div>
    </div>
  `
})
export class App {
  constructor() {
    Observable.create((observer) => {
      setTimeout(() => {
        observer.next();
      }, 2000);
    }).subscribe(() => {
      this.categories = [
        { name: 'Cat1', value: 'cat1' },
        { name: 'Cat2', value: 'cat2' },
        { name: 'Cat3', value: 'cat3' },
        { name: 'Cat4', value: 'cat4' }
      ];
    });
  }
}

请参阅此plunkr：https://plnkr.co/edit/J1aVclVcjJPqm1Qx9j0j?p=preview。

对于测试版17，您需要将#替换为let：

<div *ngFor="let category of categories;let i=index">{{i}} - (...)

ngIf与ngFor的效果似乎并不合适。请参阅thisp plunkr：https://plnkr.co/edit/aE3umzzSZ5U9BocEE9l6?p=preview

如果＆＃34;可迭代＆＃34;是一个可观察或承诺，对异步管道进行排队。

修改

你可以尝试类似的东西：

<template [ngIf]=" activeLectureContent "> <a (click)="setUnit(i)" class="btn btn-icon-only blue filter-unit-btn" *ngFor="#unit of activeLectureContent.content; #i = index"> <span>{{i+1}}</span> </a> </template>

我使用ngIf的扩展语法，因为ngFor和ngIf不能用于同一个元素。

Answer 3

因为我最近有同样的问题，所以重新发布这篇文章。

这是Angular（safe navigation operator）的完美案例。

来自文档：

Angular安全导航操作符（？。）是一种流畅且方便的方法，可以防止属性路径中的空值和未定义值。

所以问题的示例视图是：

  <div class="filter-units">
    <div>Units</div>
    <a (click)="setUnit(i)" class="btn btn-icon-only blue filter-unit-btn" 
      *ngFor="let unit of activeLectureContent?.content; let i = index">
      <span>{{i+1}}</span>
    </a>
  </div>

添加？在activeLectureContent之后，如果activeLectureContent为null或未定义，则将忽略ngFor。

Answer 4

您正在寻找AsyncPipe：

[LineItem] => Array(

         [0] => Array (

             [field] => hello

         )

         [1] => Array (

             [field] => hello part 2

         )

)

它适用于Observables，Promises和EventEmitters。您可以在guide（章节＆＃34; 不纯的AsyncPipe ＆＃34;）和documentation中获取有关它的更多信息。

angular 2 * ngFor，当iterable尚未实例化时

4 个答案: