5

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

我可以在视图中使用这样的表达式吗？

更新：这是抛出错误的部分

零件

activeLectureContent:LectureContent;

看法

  <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>

无法读取 [null] 中未定义的属性“内容”

讲座内容是这样的

export class LectureContent{
  constructor(
    public name:string = '',
    public filter:LectureFilter[]=[],
    public show:boolean = true,
    public hover:boolean = false,
    public content:any[]=[]
  ){}
}

干杯

4

4 回答 4

3

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

<div *ngIf="iterable" *ngFor="let item of iterable"><div>
于 2016-04-29T21:49:25.553 回答
3

如果它“简单地”是一个可迭代的（数组，......但不可观察，承诺），我认为没有什么可做的。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 。

使用 beta 17，您需要替换#为let：

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

似乎ngIfwithngFor效果不佳。请参阅此 plunkr：https ://plnkr.co/edit/aE3umzzSZ5U9BocEE9l6?p=preview

如果 "iterable" 是可观察的或承诺的，请查询异步管道。

编辑

你可以尝试这样的事情：

<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 不能用于同一个元素。

于 2016-04-30T08:13:24.870 回答
3

复活这篇文章，因为我最近有同样的问题。

这是 Angular（安全导航运算符）的完美案例。

从文档：

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 将被忽略。

于 2017-05-31T21:21:40.050 回答
1

您正在寻找 AsyncPipe：

<div *ngFor="#item of iterable | async"></div>

它适用于 Observables、Promises 和 EventEmitters。您可以在指南（“不纯的 AsyncPipe ”一章）和文档中获得有关它的更多信息。

于 2016-04-29T22:19:10.617 回答