角？在 ngIf 之后

Question

我正在尝试执行以下操作：

<div *ngIf="(observable$ | async) as results?.length > 0"> <-- here is the error
  <span *ngFor="let result of results>{{result}}</span>"

即仅当结果可用且结果超过 1 个时才绘制此 <div>

第一行<div> 导致错误。存在两个<div>s 的解决方案：

<div *ngIf="(observable$ | async) as results">
  <div *ngIf="results?.length > 0">
    <span *ngFor="let result of results>{{result}}</span>"

可以在单个<div> 中完成而不添加另一个容器吗？

Answer 1

? 不能在 *ngIf 语句中与 as 一起使用。你能做的最好的就是(observable$ | async)?.length > 0。

此外，当您不需要以 HTML 呈现的两个嵌套 divs（或任何其他，但您仍然需要 *ngIf / *ngFor）时，您可以使用不会呈现为 HTML 的 <ng-container>元素：

<ng-container *ngIf="(observable$ | async) as results">
  <div *ngIf="results?.length > 0">
    <span *ngFor="let result of results>{{result}}</span>

如果您试图在迭代之前检查一个元素是否为空，您实际上不需要明确地检查它，因为*ngFor 将优雅地处理空数组/列表。因此，您应该能够将您的模板简化为：

<ng-container *ngIf="(observable$ | async) as results">
  <span *ngFor="let result of results>{{result}}</span>

甚至更进一步：

<div *ngFor="let item of observable$ | async">{{result}}</div>

Answer 2

在这种情况下，我喜欢使用两个 div，因为它让我感觉更干净、更易读。不过，这对不同的人来说是不同的，所以这真的是你的偏好。

<div *ngIf="observable$ | async as results">
  <div *ngIf="results && results.length > 0">
    <span *ngFor="let result of results>{{result}}</span>"
  </div>
</div>

Answer 3

您不能在同一元素上使用 *ngFor 和 *ngIf，因此您可以使用 ng-container 来防止在输出中包含额外的 div 包装器：

<ng-container *ngIf="(observable$ | async).length; else noContent">
  <div *ngFor="let result of (observable$ | async)">
    <h3>{{ result.name }}</h3>
    <p>{{ result.price | currency }}</p>
  </div>
</ng-container>

<!-- optional -->
<ng-template #noContent>
    Nothing to show.
</ng-template>

import { Component, OnInit } from "@angular/core";
import { of, Observable } from "rxjs";
import { map, filter, tap } from "rxjs/operators";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  observable$: Observable<{name: string, price: number}[]>;

  ngOnInit() {
    // To simulate requests with some/no results 
    // Change to 1 to always return data, 0 for empty results.
    const chance = Math.random();
    this.observable$ = this.getMockData(chance).pipe(
      map(res => res.results)
    );
  }

  getMockData(random) {
    const results =
      random <= 0.5
        ? { results: [] }
        : {
            results: [
              { name: "Widget", price: 300 },
              { name: "Widget 2", price: 50 },
              { name: "Widget 3", price: 75 }
            ]
          };
    return of(results);
  }
}

输出：

<div _ngcontent-sqx-c0="">
  <h3 _ngcontent-sqx-c0="">Widget</h3>
  <p _ngcontent-sqx-c0="">$300.00</p>
</div>
<div _ngcontent-sqx-c0="">
  <h3 _ngcontent-sqx-c0="">Widget 2</h3>
  <p _ngcontent-sqx-c0="">$50.00</p>
</div>
<div _ngcontent-sqx-c0="">
  <h3 _ngcontent-sqx-c0="">Widget 3</h3>
  <p _ngcontent-sqx-c0="">$75.00</p>
</div>

Stackblitz