Angular2 中的可观察对象

Question

以下是我的部分 angular2 组件模板 html。 "searchTickets$" 是一个 Observable 对象数组。

<table class="table table-condensed" *ngIf="searchTickets$">
<thead>
    <tr>
        <th><h3>Ticket ID</h3></th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let ticket of searchTickets$  | async">
        <td><small>{{ticket.ticketID}}</small></td>     
    </tr>
</tbody>
</table>

我的意图是只有当 observable 时才显示表格 返回 1 条或多条记录。

需要在 *ngIf 条件中修改什么来实现这一点。

Answer 1

你应该试试

<table class="table table-condensed" *ngIf="(searchTickets$ | async)?.length > 0">

Answer 2

正如@xe4me 所说：

<table class="table table-condensed" *ngIf="(searchTickets$ | async)?.length">

应该可以。

但是

不要忘记 async 正在订阅您的 observable。

这意味着拥有：

<table class="table table-condensed" *ngIf="searchTickets$">

和

<tr *ngFor="let ticket of searchTickets$  | async">

将导致两个不同的订阅。

如果您在可观察链中的某处进行 HTTP 调用，它将被触发两次。

我猜这不是一个很好的选择。

相反，您应该这样做：

---

如果您想处理 HTML 中的 observable 而不会因为异步而多次触发 observable

@Component({
  ...
})
export class YourComponent {
  public searchTickets: any;

  constructor(private yourService: any) {
    this.searchTickets = yourService
      .getSearchTicket()
      .share();

    // share allows you to avoid duplicate subscriptions
  }
}

---

如果您想处理 TS 中的 observable

@Component({
  ...
})
export class YourComponent implements OnDestroy {
  public searchTickets: any;
  private searchTicketsSub: Subscription;

  constructor(private yourService: any) {
    this.searchTickets =
      // let say you have the observable coming from a service that
      // makes an HTTP call 
      yourService
        .getSearchTicket()
        .subscribe((searchTickets: any) => this.searchTickets = searchTickets);
  }

  ngOnDestroy() {
    // then, don't forget to unsubscribe
    this.userSub.unsubscribe();
  }
}